本文介紹了Vue使用mixins實現壓縮圖片代碼，分享給大家，具體如下：

圖片壓縮

創建mixins image-compress.js

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，進行壓縮      uploadSrc = canvas.toDataURL(file.type, maxSize / fileSize);      uploadFile = this.convertBase64UrlToFile(uploadSrc, file.name); // 轉成file文件     } else {      uploadSrc = image.src;      uploadFile = file;     }     let compressedSize = uploadFile.size / 1024;// 壓縮后圖片大小 (單位KB)     // 判斷圖片大小是否小于maxSize，如果大于則繼續壓縮至小于為止     if (compressedSize.toFixed(2) > maxSize) {      this.checkAndHandleUpload(uploadFile);     } else {      let fileOptions = {uploadSrc, uploadFile};      resolve(fileOptions);     }    });   });  },  /**   * 將圖片轉化為base64   */  imgBase64(file, callback) {   // 看支持不支持FileReader   if (!file || !window.FileReader) return;   // 創建一個 Image 對象   let image = new Image();   // 綁定 load 事件處理器，加載完成后執行   image.onload = function () {    // 創建 canvas DOM 對象    let canvas = document.createElement('canvas');    // 返回一個用于在畫布上繪圖的環境, '2d' 指定了您想要在畫布上繪制的類型    let ctx = canvas.getContext('2d');    // 如果高度超標 // 參數，最大高度    let MAX_HEIGHT = 3000;    if (image.height > MAX_HEIGHT) {     // 寬度等比例縮放 *=     image.width *= MAX_HEIGHT / image.height;     image.height = MAX_HEIGHT;    }    // 獲取 canvas的 2d 環境對象,    // 可以理解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)) {    // 創建一個reader    let reader = new FileReader();    // 將圖片將轉成 base64 格式    reader.readAsDataURL(file);    // 讀取成功后的回調    reader.onload = function () {     // 設置src屬性，瀏覽器會自動加載。     // 記住必須先綁定事件，才能設置src屬性，否則會出同步問題。     image.src = this.result;    };   }  },  /**   * 把Base64轉換成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});  } }};