js如何實現(xiàn)一張圖片的壓縮與上傳（附代碼）

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

 /*
 file：文件(類型是圖片格式)，
 obj：文件壓縮后對象width， height， quality(0-1)
 callback：容器或者回調(diào)函數(shù)
 */
 photoCompress(file,obj,callback){
 let that=this;
 let ready=new FileReader();
 /*開始讀取指定File對象中的內(nèi)容. 讀取操作完成時,返回一個URL格式的字符串.*/
 ready.readAsDataURL(file);
 ready.onload=function(){
 let re=this.result;
 that.canvasDataURL(re,obj,callback) //開始壓縮
 }
 },

/*利用canvas數(shù)據(jù)化圖片進(jìn)行壓縮*/
 canvasDataURL(path, obj, callback){
 
 let img = new Image();
 img.src = path;
 img.onload = function(){
 let that = this; //指到img
 // 默認(rèn)按比例壓縮
 let w = that.width,
 h = that.height,
 scale = w / h;
 w = obj.width || w;
 h = obj.height || (w / scale);
 let quality = 0.7; // 默認(rèn)圖片質(zhì)量為0.7
 //生成canvas
 let canvas = document.createElement('canvas');
 let ctx = canvas.getContext('2d');
 // 創(chuàng)建屬性節(jié)點(diǎn)
 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);
 // 圖像質(zhì)量
 if(obj.quality && obj.quality <= 1 && obj.quality > 0){
 quality = obj.quality;
 }
 // quality值越小，所繪制出的圖像越模糊
 let base64 = canvas.toDataURL('image/jpeg', quality);
 // 回調(diào)函數(shù)返回base64的值
 callback(base64);
 }
 },

 /*這里轉(zhuǎn)為blob*/
 convertBase64UrlToBlob(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) { //選擇文件后執(zhí)行
 let that=this
 let fileObj=e.target.files[0] //獲取file
 //console.log(fileObj)
 var form = new FormData(); // 創(chuàng)建FormData 對象
 if(fileObj.size/1024 > 1025) { //文件大于1M，進(jìn)行壓縮上傳
 that.photoCompress(fileObj, { //調(diào)用壓縮圖片方法
 quality: 0.2
 }, function(base64Codes){
 //console.log("壓縮后：" + base.length / 1024 + " " + base);
 let bl = that.convertBase64UrlToBlob(base64Codes);
 //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} 請求錯誤!`)
 // }
 // }
 
 },