vue+element-ui上傳圖片時壓縮大小

第一種方法：需要安裝一個模塊

yarn add image-conversion --save

<el-upload
  ref="upload" :data="date" :action="URL+'/api/post/file'" :before-upload="beforeAvatarAUDIO3" //將用到此方法 :on-success="handleAvatarAUDIO3" :on-error="error3" :file-list="fileList" >

 

第一種方法，需要引入imageConversion

import imageConversion from 'image-conversion' 

 

beforeAvatarAUDIO3(file) {
      //第一種方法開始-------------------------------------------------------------------------
      return new Promise((resolve, reject) => {
        let _URL = window.URL || window.webkitURL
        // let isLt2M = file.size / 1024 / 1024 > 2 // 判定圖片大小是否小於4MB
        // 這里需要計算出圖片的長寬
        let img = new Image()
        img.onload = function () {
          file.width = img.width // 獲取到width放在了file屬性上
          file.height = img.height // 獲取到height放在了file屬性上
          let valid = img.width > 1280 // 圖片寬度大於1280
          // compressAccurately有多個參數時傳入對象
          if (valid) {
            imageConversion.compressAccurately(file, {
              size: 1024, //圖片大小壓縮到1024kb
              width:1280 //寬度壓縮到1280
            }).then(res => {
              resolve(res)
            })
          } else resolve(file)
        }
        // 需要把圖片賦值
        img.src = _URL.createObjectURL(file)
      })
　　//第一種方法結束---------------------------------------------------------------------------------
 //第二種方法（改變圖片分辨率大小實現壓縮）-----------------------------------------------------------------
   const _this = this
   return new Promise(resolve => {
      const reader = new FileReader()
      const image = new Image()
      image.onload = (imageEvent) => {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        let width = image.width;
        let height = image.height;
　　　　  　//等比縮放第一種 寬或高超過1280，進行等比例縮放
　　　 let rate = image.width / image.height if (width > 1280 || height > 1280) {
            width = rate > 1 ? 1280 : 1280 * rate;
            height = rate < 1 ? 1280 : 1280 / rate; }

　　　  //等比縮放第二種 寬或高超過1280，等比縮放

           let rate = 1280 / width > 1;

          let tate = 1280 / height > 1;

          if(!rate){

            let product = 1280 / width

            width =  Math.floor((width * product)*100)/100

            height =  Math.floor((height * product)*100)/100

          }else if(!tate){

            let product = 1280 / height

            width =  Math.floor((width * product)*100)/100

            height =  Math.floor((height * product)*100)/100

          }

        canvas.width = width;
        canvas.height = height;
        context.clearRect(0, 0, width, height);
        context.drawImage(image, 0, 0, width, height);
        const dataUrl = canvas.toDataURL(file.type);
        const blobData = _this.dataURItoBlob(dataUrl, file.type);
        resolve(blobData)
      }
      reader.onload = (e => { image.src = e.target.result; });
      reader.readAsDataURL(file);
   })
　　//第二種方法結束-----------------------------------------------------------------------------------
},




dataURItoBlob(dataURI, type) {
   var binary = atob(dataURI.split(',')[1]);
   var array = [];
   for(var i = 0; i < binary.length; i++) {
     array.push(binary.charCodeAt(i));
   }
  return new Blob([new Uint8Array(array)], {type: type});
},