js如何实现一张图片的压缩与上传（附代码）

<input type="file" name="file" accept="image/*" @change="selectImgs" ref="file" />

 /*
 file：文件(类型是图片格式)，
 obj：文件压缩后对象width， height， quality(0-1)
 callback：容器或者回调函数
 */
 photoCompress(file,obj,callback){
 let that=this;
 let ready=new FileReader();
 /*开始读取指定File对象中的内容. 读取操作完成时,返回一个URL格式的字符串.*/
 ready.readAsDataURL(file);
 ready.onload=function(){
 let re=this.result;
 that.canvasDataURL(re,obj,callback) //开始压缩
 }
 },

/*利用canvas数据化图片进行压缩*/
 canvasDataURL(path, obj, callback){
 
 let img = new Image();
 img.src = path;
 img.onload = function(){
 let that = this; //指到img
 // 默认按比例压缩
 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
 //生成canvas
 let 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 base = canvas.toDataURL('image/jpeg', quality);
 // 回调函数返回base的值
 callback(base);
 }
 },

 /*这里转为blob*/
 convertBaseUrlToBlob(urlData){
 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);
 }
 return new Blob([u8arr], {type:mime});
 },

 selectImgs(e) { //选择文件后执行
 let that=this
 let fileObj=e.target.files[0] //获取file
 //console.log(fileObj)
 var form = new FormData(); // 创建FormData 对象
 if(fileObj.size/1024 > 1025) { //文件大于1M，进行压缩上传
 that.photoCompress(fileObj, { //调用压缩图片方法
 quality: 0.2
 }, function(baseCodes){
 //console.log("压缩后：" + base.length / 1024 + " " + base);
 let bl = that.convertBaseUrlToBlob(baseCodes);
 //console.log(bl)
 form.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象
 that.imgRequest(form); //请求图片上传接口
 });
 }else{ //小于等于1M 原图上传
 form.append("file", fileObj); // 文件对象
 that.imgRequest(form); //请求图片上传接口
 }
 },

 /*图片上传接口*/
 imgRequest(param){
 PostSaveImg( //封装的ajax（axios）方法
 param
 ).then(data => {
 if (data.status === 200 || data.status === 304){
 let item={
 path:this.imgpath+data.data[0].path,
 }
 let jsonitem={
 jlid:this.jlid,
 path:data.data[0].path,
 xxdm:this.xxdm,
 }
 this.imglistJson.push(jsonitem)
 this.imglist.push(item)
 }else{
 Toast({ //封装的提示方法
 message: '图片上传失败',
 position: 'middle',
 duration: 2000
 })
 } 
 })
 
 /*原生请求*/
 // const xhr = new XMLHttpRequest() 
 // xhr.open('POST', HOSTMOBILE+'api/mobile/xcjg/sctp', true) //接口地址
 // xhr.send(param)
 // xhr.onload = () => {
 // if (xhr.status === 200 || xhr.status === 304) {
 // let datas = JSON.parse(xhr.responseText)
 // console.log('response: ', datas)
 // } else {
 // alert(`${xhr.status} 请求错误!`)
 // }
 // }
 
 },