摘要：環(huán)境，這里的指到實(shí)例一圖片壓縮文件類(lèi)型是圖片格式，文件壓縮后對(duì)象，，容器或者回調(diào)函數(shù)開(kāi)始讀取指定對(duì)象中的內(nèi)容讀取操作完成時(shí)返回一個(gè)格式的字符串開(kāi)始?jí)嚎s利用數(shù)據(jù)化圖片進(jìn)行壓縮圖片轉(zhuǎn)指到默認(rèn)按比例壓縮默認(rèn)圖片質(zhì)量為生成創(chuàng)建屬性節(jié)點(diǎn)圖像質(zhì)量值越

*vue+webpack環(huán)境，這里的that指到vue實(shí)例

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

/*利用canvas數(shù)據(jù)化圖片進(jìn)行壓縮*/
/*圖片轉(zhuǎn)base64*/
    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);
        }
    },

這里后臺(tái)接口不支持base64，根據(jù)實(shí)際接口情況使用

    /*這里轉(zhuǎn)blob*/
    base64UrlToBlob(urlData){
        let arr = urlData.split(","), 
        mime = arr[0].match(/:(.*?);/)[1],  // 去掉url的頭，并轉(zhuǎn)化為byte
        bstr = atob(arr[1]),    // 處理異常,將ascii碼小于0的轉(zhuǎn)換為大于0
        n = bstr.length, 
        u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type:mime});
        //轉(zhuǎn)file
        //return new File([u8arr], filename, {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 對(duì)象
      if(fileObj.size/1024 > 1025) { //文件大于1M（根據(jù)需求更改），進(jìn)行壓縮上傳
          that.photoCompress(fileObj, {   //調(diào)用壓縮圖片方法
              quality: 0.2
          }, function(base64Codes){
              //console.log("壓縮后：" + base.length / 1024 + " " + base);
              let bl = that.base64UrlToBlob(base64Codes);
              //console.log(bl)
              form.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件對(duì)象
              that.imgRequest(form);  //請(qǐng)求圖片上傳接口
          });
      }else{ //小于等于1M 原圖上傳
          form.append("file", fileObj); // 文件對(duì)象
          that.imgRequest(form);   //請(qǐng)求圖片上傳接口
      }
    },

     /*圖片上傳接口*/
    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
              })
          } 
      })
      
      /*原生請(qǐng)求*/
      // 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} 請(qǐng)求錯(cuò)誤!`)
      //   }
      // }
      
    },

element ui 圖片上傳組件（不包含壓縮）