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

时间：2022-03-06 05:49:54

在利用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

 <input class="ele-hidden" type="file"  accept="image/*" size="30"

              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); //上传方法
        }
      };
    }

　　图片解析和压缩方法：

 export function compress(img) {

   let canvas = document.createElement("canvas");

   let ctx = canvas.getContext("2d");

   let initSize = img.src.length;

   let width = img.width;

   let height = img.height;

   canvas.width = width;

   canvas.height = height;

   // 铺底色

   ctx.fillStyle = "#fff";

   ctx.fillRect(0, 0, canvas.width, canvas.height);

   ctx.drawImage(img, 0, 0, width, height);

   //进行最小压缩

   let ndata = canvas.toDataURL("image/jpeg", 0.1);

   return ndata;

 }

 export function dataURItoBlob(base64Data) {

   var byteString;

   if (base64Data.split(",")[0].indexOf("base64") >= 0)

     byteString = atob(base64Data.split(",")[1]);

   else byteString = unescape(base64Data.split(",")[1]);

   var mimeString = base64Data

     .split(",")[0]

     .split(":")[1]

     .split(";")[0];

   var ia = new Uint8Array(byteString.length);

   for (var i = 0; i < byteString.length; i++) {

     ia[i] = byteString.charCodeAt(i);

   }

   return new Blob([ia], { type: mimeString });

 }

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

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

　　

相关文章