vue+axios实现移动端图片上传

框架

浏览数:301

2019-9-4

在利用vue做一些H5页面时,或多或少会遇到有图片上传的操作,主要是运用html5里面的input[type=file]来实现,传递到后端的数据是以二进制的格式传递,所以上传图片的请求与普通的请求稍微有点差异,具体体现在传递数据的格式是FormData,FormData是一个构造函数,具体用法链接如下:

MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

其次,由于图片是以二进制方式上传,所以需要修改下请求头的Content-Type类型为“multipart/form-data”以支持二进制数据上传。

在具体有以下几部分的实现:

  1、页面端,利用H5的input[type=file]表单,进行图片上传,accept属性可以设置接收文件的类型,具体有: .doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document

1 <input class="ele-hidden" type="file"  accept="image/*" size="30"
2              ref="getPhoto" @change="uploadAvatar('getPhoto')">

  2、选择图片确认后会触发元素change事件,在input对象中,存在file属性,file是一个数组,数组里面存储的上传文件的File对象,里面包含上传文件的大小(size)、类型(type)、更改时间(lastModifiedDate)等。具体文档可参考:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

  读取图片信息可以借助FileReader,解析成浏览器识别的格式,以实现图片的预览,FileReader构造函数文档地址为:https://developer.mozilla.org/en-US/docs/Web/API/FileReader/FileReader

  实例代码主要是为了解决移动端上传图片过大而进行了压缩,压缩后的图片体积大概是压缩前的十分之一,还是很可观的。

uploadAvatar(node) {//图片上传
      let $node = this.$refs[node];
      let file = $node.files[0];//获取当前选择的照片
      let formData = new FormData();
      let _this = this;
      if(!file) return;
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function(e) {
        let img = new Image();
        img.onload = function () {
      img.src = e.target.result;
          let data = compress(img);
          let blob = dataURItoBlob(data);
          formData.append("photo", blob);
          _this.submitModify(formData); //上传方法
        }
      };
    }

  图片解析和压缩方法:

 1 export function compress(img) {
 2   let canvas = document.createElement("canvas");
 3   let ctx = canvas.getContext("2d");
 4   let initSize = img.src.length;
 5   let width = img.width;
 6   let height = img.height;
 7   canvas.width = width;
 8   canvas.height = height;
 9   // 铺底色
10   ctx.fillStyle = "#fff";
11   ctx.fillRect(0, 0, canvas.width, canvas.height);
12   ctx.drawImage(img, 0, 0, width, height);
13 
14   //进行最小压缩
15   let ndata = canvas.toDataURL("image/jpeg", 0.1);
16   return ndata;
17 }
18 
19 export function dataURItoBlob(base64Data) {
20   var byteString;
21   if (base64Data.split(",")[0].indexOf("base64") >= 0)
22     byteString = atob(base64Data.split(",")[1]);
23   else byteString = unescape(base64Data.split(",")[1]);
24   var mimeString = base64Data
25     .split(",")[0]
26     .split(":")[1]
27     .split(";")[0];
28   var ia = new Uint8Array(byteString.length);
29   for (var i = 0; i < byteString.length; i++) {
30     ia[i] = byteString.charCodeAt(i);
31   }
32   return new Blob([ia], { type: mimeString });
33 }

  3、更改请求头content-type类型

1 this.$axios.defaults.headers.post['Content-Type'] = 'multipart/form-data;charset=UTF-8';

  

作者:Gerryli