**
 * 圖片壓縮工具類
 * 最大高度和最大寬度都為 500，如果超出大小將等比例縮放。
 *
 * 注意可能出現(xiàn)壓縮后比原圖更大的情況，在調(diào)用的地方自己判斷大小并決定上傳壓縮前或壓縮后的圖到服務(wù)器。
 */
// 將base64轉(zhuǎn)換為blob
export function convertBase64UrlToBlob(urlData) {
 let arr = urlData.split(',')
 let mime = arr[0].match(/:(.*?);/)[1]
 let bstr = atob(arr[1])
 let n = bstr.length
 let u8arr = new Uint8Array(n)
 while (n--) {
  u8arr[n] = bstr.charCodeAt(n)
 }
 return new Blob([u8arr], {type: mime})
}

// 壓縮圖片
export function compressImage(path) {
 //最大高度
 const maxHeight = 500;
 //最大寬度
 const maxWidth = 500;
 return new Promise((resolve, reject) => {
  let img = new Image();
  img.src = path;
  img.onload = function () {
   const originHeight = img.height;
   const originWidth = img.width;
   let compressedWidth = img.height;
   let compressedHeight = img.width;
   if ((originWidth > maxWidth) && (originHeight > maxHeight)) {
    // 更寬更高，
    if ((originHeight / originWidth) > (maxHeight / maxWidth)) {
     // 更加嚴(yán)重的高窄型，確定最大高，壓縮寬度
     compressedHeight = maxHeight
     compressedWidth = maxHeight * (originWidth / originHeight)
    } else {
     //更加嚴(yán)重的矮寬型, 確定最大寬，壓縮高度
     compressedWidth = maxWidth
     compressedHeight = maxWidth * (originHeight / originWidth)
    }
   } else if (originWidth > maxWidth && originHeight <= maxHeight) {
    // 更寬，但比較矮，以maxWidth作為基準(zhǔn)
    compressedWidth = maxWidth
    compressedHeight = maxWidth * (originHeight / originWidth)
   } else if (originWidth <= maxWidth && originHeight > maxHeight) {
    // 比較窄，但很高，取maxHight為基準(zhǔn)
    compressedHeight = maxHeight
    compressedWidth = maxHeight * (originWidth / originHeight)
   } else {
    // 符合寬高限制，不做壓縮
   }
   // 生成canvas
   let canvas = document.createElement('canvas');
   let context = canvas.getContext('2d');
   canvas.height = compressedHeight;
   canvas.width = compressedWidth;
   context.clearRect(0, 0, compressedWidth, compressedHeight);
   context.drawImage(img, 0, 0, compressedWidth, compressedHeight);
   let base64 = canvas.toDataURL('image/*', 0.8);
   let blob = convertBase64UrlToBlob(base64);
   // 回調(diào)函數(shù)返回blob的值。也可根據(jù)自己的需求返回base64的值
   resolve(blob)
  }
 })
}

<template>
 <div>
  <van-uploader v-model="fileList" :after-read="afterRead" />
 </div>
</template>
<script>
 import {compressImage} from '../../utils/CompressImageUtils'
 export default {
  components: {},
  methods: {
   //讀取完圖片后
   afterRead(file) {
    console.log('afterRead------', file);
    this._compressAndUploadFile(file);
   },
   //壓縮圖片上傳
   _compressAndUploadFile(file) {
    compressImage(file.content).then(result => {
     console.log('壓縮后的結(jié)果', result); // result即為壓縮后的結(jié)果
     console.log('壓縮前大小', file.file.size);
     console.log('壓縮后大小', result.size);
     if (result.size > file.file.size){
      console.log('上傳原圖');
      //壓縮后比原來更大，則將原圖上傳
      this._uploadFile(file.file, file.file.name);
     } else {
      //壓縮后比原來小，上傳壓縮后的
      console.log('上傳壓縮圖');
      this._uploadFile(result, file.file.name)
     }
    })
   },
   //上傳圖片
   _uploadFile(file, filename) {
    let params = new FormData();
    params.append("file", file, filename);
    this.$api.uploadImage(params).then(res => {
     console.log('uploadImage', res);
   //上傳成功，寫自己的邏輯
    }).catch(err => {
     console.log('err', err);
    });
   }, 
  }
 }
</script>

//上傳圖片
 uploadImage(params){
  return axios.post(`${base}/api/v1/file`, params, {
   headers: {'content-type': 'multipart/form-data'}
  })
 },