export default {

 methods: {
  /**
   * 檢查并壓縮圖片大小
   */
  checkAndHandleCompression(file) {

   return new Promise((resolve, reject) => {

    this.imgBase64(file, (image, canvas) => {
     let maxSize = 2 * 1024; // 2M (單位KB)
     let fileSize = file.size / 1024; // 圖片大小 (單位KB)

     let uploadSrc, uploadFile;
     if (fileSize > maxSize) { // 如果圖片大小大于maxSize，進(jìn)行壓縮
      uploadSrc = canvas.toDataURL(file.type, maxSize / fileSize);
      uploadFile = this.convertBase64UrlToFile(uploadSrc, file.name); // 轉(zhuǎn)成file文件
     } else {
      uploadSrc = image.src;
      uploadFile = file;
     }

     let compressedSize = uploadFile.size / 1024;// 壓縮后圖片大小 (單位KB)
     // 判斷圖片大小是否小于maxSize，如果大于則繼續(xù)壓縮至小于為止
     if (compressedSize.toFixed(2) > maxSize) {
      this.checkAndHandleUpload(uploadFile);
     } else {
      let fileOptions = {uploadSrc, uploadFile};
      resolve(fileOptions);
     }
    });

   });

  },

  /**
   * 將圖片轉(zhuǎn)化為base64
   */
  imgBase64(file, callback) {
   // 看支持不支持FileReader
   if (!file || !window.FileReader) return;
   // 創(chuàng)建一個(gè) Image 對(duì)象
   let image = new Image();
   // 綁定 load 事件處理器，加載完成后執(zhí)行
   image.onload = function () {
    // 創(chuàng)建 canvas DOM 對(duì)象
    let canvas = document.createElement('canvas');
    // 返回一個(gè)用于在畫布上繪圖的環(huán)境, '2d' 指定了您想要在畫布上繪制的類型
    let ctx = canvas.getContext('2d');
    // 如果高度超標(biāo) // 參數(shù)，最大高度
    let MAX_HEIGHT = 3000;
    if (image.height > MAX_HEIGHT) {
     // 寬度等比例縮放 *=
     image.width *= MAX_HEIGHT / image.height;
     image.height = MAX_HEIGHT;
    }
    // 獲取 canvas的 2d 環(huán)境對(duì)象,
    // 可以理解Context是管理員，canvas是房子
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 重置canvas寬高
    canvas.width = image.width;
    canvas.height = image.height;
    // 將圖像繪制到canvas上
    ctx.drawImage(image, 0, 0, image.width, image.height);

    callback(image, canvas);

   };
   if (/^image/.test(file.type)) {
    // 創(chuàng)建一個(gè)reader
    let reader = new FileReader();
    // 將圖片將轉(zhuǎn)成 base64 格式
    reader.readAsDataURL(file);
    // 讀取成功后的回調(diào)
    reader.onload = function () {
     // 設(shè)置src屬性，瀏覽器會(huì)自動(dòng)加載。
     // 記住必須先綁定事件，才能設(shè)置src屬性，否則會(huì)出同步問題。
     image.src = this.result;
    };
   }
  },

  /**
   * 把Base64轉(zhuǎn)換成file文件
   */
  convertBase64UrlToFile(dataurl, filename) {
   let arr = dataurl.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 File([u8arr], filename, {type: mime});
  }

 }
};

<template>
  ...
</template>
<script>
 import imageUploadMixins from '@/mixins/image-compress'; 
 export default { 
  mixins: [imageUploadMixins],  
  ...  
  methods:{
    handleUploadImage(e){
      let file = e.target.files[0];
      this.checkAndHandleCompression(file).then( fileOptions => {
        // let {uploadSrc, uploadFile} = fileOptions;
        
        // 壓縮完成使用 uploadSrc, uploadFile
        
        ...
        
      });
    }
  }
   ...  
 }
</script>
<style>
  ...
</style>