由于图片压缩中使用了大量异步操作，这里使用es7 async 语法处理异步问题

基本思路是:先将file数据读取为DataUrl类型的数据，再将DataUrl绘制到canvas，
通过canvas的apitoDataURL转换为base64数据并压缩数据，最后再将base64数据转换
为blob数据类型，再上传到服务器。整个流程就完成了。下面是具体的实现方式。

1.读取file转换为DataUrl

async function fileLoad(file){return new Promise((resolve)=>{let ready = new FileReader();/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/ready.readAsDataURL(file);ready.onload = function () {resolve(this.result);}})}

2.将数据绘制到canvas上，压缩数据

async function canvasDataURL(path, obj) {return new Promise((resolve)=>{let img = new Image();img.src = path;img.onload = function () {let that = this;// 默认按比例压缩let w = that.width,h = that.height,scale = w / h;w = obj.width || w;h = obj.height || (w / scale);let quality = 0.7;  // 默认图片质量为0.7//生成canvaslet canvas = document.createElement('canvas');let ctx = canvas.getContext('2d');// 创建属性节点let anw = document.createAttribute("width");anw.nodeValue = w;let anh = document.createAttribute("height");anh.nodeValue = h;canvas.setAttributeNode(anw);canvas.setAttributeNode(anh);ctx.drawImage(that, 0, 0, w, h);// 图像质量if (obj.quality && obj.quality <= 1 && obj.quality > 0) {quality = obj.quality;}// quality值越小，所绘制出的图像越模糊let base64 = canvas.toDataURL('image/jpeg', quality);// 回调函数返回base64的值resolve(base64);}});}

3.将bas64转换为blob

async function convertBase64UrlToBlob(urlData) {return new Promise((resolve)=>{let arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}let blob = new Blob([u8arr], {type: mime});resolve(blob);})}

4.最后实现压缩方法

/*** 三个参数* file：一个是文件(类型是图片格式)，* w：配置对象* photoCompress()*/
async function photoCompress(file, w) {let re = await fileLoad(file);let base64 = await canvasDataURL(re, w);let blob = await convertBase64UrlToBlob(base64);return new Promise((resolve)=>{resolve(blob);})
}

5.使用方法

async function upload(file) {let form = new FormData();let fileData = await photoCompress(file, {quality: 0.5});form.append('pictrue',fileData,file.name);// 上传form
}