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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

在利用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\';

以上是 vue+axios实现移动端图片上传 的全部内容， 来源链接： utcz.com/z/375105.html

回到顶部