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

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

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

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

在具体有如下几部分的实现：

　　一、页面端，利用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')">

　　二、选择图片确认后会触发元素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 }

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

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