vue + axios 实现图片上传 简单版

uploadImg(img) { // img  =>  base64图片地址
      let param = new FormData(); //创建form对象
      param.append(‘multipartFile‘, this.dataURLtoBlob(img));// base64 转  二进制流   multipartFile => 后端要求的参数
      this.$axios({
        method: ‘post‘,  // post 方式
        url: ‘/ss-minprogram/uploads‘,  // 接口地址
        headers: { // 设置请求头
          "Content-Type": "multipart/form-data"
        },
        data: param  // 参数
      }).then((re) => { // 成功

      }).catch((err) => { // 异常

      })
    },
    //base64 转二进制流
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(‘,‘), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },

原文地址:https://www.cnblogs.com/skydragonli/p/12557214.html

时间: 2024-07-30 11:13:41

vue + axios 实现图片上传 简单版的相关文章

vue+axios+elementUI文件上传与下载

vue+axios+elementUI文件上传与下载 Simple_Learn 关注 0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要介绍一种,elementUI官网 上传组件 http-request 这种属性的使用. 图片.png 代码如下: <el-upload class="uploadfile" action="" :http-request='uploadFileMethod' :sh

SpringMVC+Spring+MyBatis 整合与图片上传简单示例

一.思路: (一) Dao层: 1. SqlMapConfig.xml,空文件即可.需要文件头.2. applicationContext_dao.xml. a) 数据库连接池b) SqlSessionFactory对象,需要spring和mybatis整合包下的.c) 配置mapper文件扫描器. (二)Service层: 1.applicationContext_service.xml包扫描器,扫描@service注解的类.2.applicationContext_trans.xml配置事务

h5图片上传简易版(FileReader+FormData+ajax)

一.选择图片(input的file类型) <input type="file" id="inputImg"> 1. input的file类型会渲染为一个按钮和一段文字.点击按钮可打开文件选择窗口:file类型的input会有files属性,保存着文件的相关信息. 2. input.files是一个数组,由传入的file对象组成.每个file对象包含以下属性: lastModified:数值,表示最近一次修改时间的毫秒数: lastModifiedDate

axios进行图片上传

进行图片的上传,一定要注意headers的设置:             headers:{"Content-Type":"multipart/form-data"} html        JS     请求的效果 ------------------------------------------------------------------- 原文地址:https://www.cnblogs.com/fanbulaile/p/11791924.html

vue 图片上传功能

这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下: <ul class="clearfix">   <li v-if="imgs.length>0" v-for='(item ,index ) in imgs'>   <img :src="item">   </li>   <li style="position:

vue项目富文本编辑器vue-quill-editor之自定义图片上传

使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改配置. 创建一个quill-config.js的文件,里面写自定义图片上传.代码如下 /*富文本编辑图片上传配置*/ const uploadConfig = { action: '', // 必填参数 图片上传地址 methods: 'POST', // 必填参数 图片上传方式 token: ''

CKEditor不借助CKFinder实现图片上传(.net版 ashx实现)

参考博客:http://blog.csdn.net/mydwr/article/details/8669594 本人版本:4.4.6 打开文件:ckeditor/plugins/image/dialogs/image.js 搜索内容:[c.config.image_previewText],并删掉其后引号内的内容. 删除后格式:[c.config.image_previewText||""]. 与原文差异:原内容原文中是[b.config.image_previewText],我这里是

UEditor之实现配置简单的图片上传示例

开心一笑 下班后,阿华到楼下小超市买毛巾,刚买完出来,就遇到同一办公楼里另一家公司的阿菲,之前与她远远的有过几次眼神交流,但从没说过话,"买毛巾啊",看着阿华手里的毛巾,阿菲先开口了. 阿华回到:"是啊,这里的老板眼神太好了,我不敢偷,就只有买了." 阿菲一下就哈哈笑了,配合到:"哇,原来你是小偷." 阿华:"嘘,小声点,其实主要原因是--"阿华指着自己的脑袋接着说到:"你看,我是个有头有脸的人,所以还是要用用毛巾的

UEditor之实现配置简单的图片上传示例 (转)

http://blog.csdn.net/huangwenyi1010/article/details/51637427#comments 1.首先你可以到官网Ueditor,查看很详细的文档,包括如何安装到Eclipse,相关jar包和如何使用Ueditor,本文主要介绍如何实现单图片上传和利用自己的接口: 运行tomcat上,在google浏览器运行(Test是我的项目名称): http://localhost:8081/Test/jsp/config.json 出现一串长长的json的字符