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”以支持二进制数据上传。

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

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

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 });
}