摘要：因為異步壓縮的時候我們上傳的文件的數(shù)量不定，所以上面需要使用關鍵字來修飾壓縮過程。而下面的壓縮過程的實現(xiàn)，最終返回一個對象，當壓縮過程已完成后，完整的生成的文件存于其中。

這段時間，項目需要做一個這樣的功能：客戶端在上傳文件的時候（具體文件類型），需要對文件進行壓縮再上傳以節(jié)省帶寬和服務器端資源，完成這個功能，我們選擇了GitHub上的JSZip,它是一個客戶端插件，可以提供客戶端壓縮功能，作者給出了API，但是實際使用過程中還是有很多問題，下面是實際過程中遇到的各類問題，直至最終完成整個文件壓縮再上傳至后臺。

前端node.js + webpack 作前后臺分離，后端java

主要js代碼：

var JSZip = require("jszip");
const components = require("components");

$("#confirmBtn").on("click", async function() {
  // 綁定上傳的確認按鈕，獲取到obj等模型文件，并壓縮
  let zip = new JSZip();//聲明并創(chuàng)建JSZip對象
  var fileBox = $("#fileUploadInput"); //從頁面獲取到需要上傳的文件列表，當然html是一個多文件上傳
  var fileList = fileBox[0].files;
  var objName = "example"; // 這里定義一個壓縮文件的名字，以供后臺使用，當然也可以動態(tài)獲取
  //  var flag = false;
  for (const fileObject of fileList) {
    zip = await zipFileAsync(zip, fileObject); //這是設置異步上傳，await關鍵字使得后面的zipFileAsync方法執(zhí)行結束后才將對象返回給zip變量
  }
  sendFileAsync(zip, objName);
  console.log(zip);
  return false; // 設置return false防止表單提交
});

這部分代碼就是異步壓縮的核心，以及如何調用的下面的異步壓縮算法，上面需要Async與await關鍵字缺一不可，一開始也嘗試過使用同步壓縮的方式，但是會出現(xiàn)壓縮還沒有全部完成，就已經(jīng)開始提交文件的現(xiàn)象，特別感謝lrh3321的指導，才完整的實現(xiàn)了這個功能。

因為異步壓縮的時候我們上傳的文件的數(shù)量不定，所以上面需要使用await關鍵字來修飾壓縮過程。而下面的壓縮過程的實現(xiàn)，最終返回一個promise對象，當壓縮過程已完成后，完整的生成的文件存于其中。

/**
 * 異步壓縮文件
 * @param zip file
 */
function zipFileAsync(zip, file) {
  const promise = new Promise((resolve) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = function(e) {
      var result = reader.result;
      //  讀完轉一下格式
      result = convertBase64UrlToBlob(result);
      console.log(zip);
      console.log(file.name);
      console.log(file.size);
      // resolve 方法保證異步壓縮完成后才返回promise
      resolve(
        zip.file(file.name, result, {
          type: "blob",
        }));
    };
  });
  return promise;
}

這里的demo請查看JSZip給的例子

/**
 * 異步發(fā)送文件
 * @param zip file
 */
function sendFileAsync(zip, objName) {
  zip.generateAsync({
    type: "blob",
    compression: "DEFLATE", //  force a compression for this file
    compressionOptions: { //  使用壓縮等級，1-9級，1級壓縮比最低，9級壓縮比最高
      level: 6,
    },
  }).then(
      function(content) {
        var formData = new FormData();
        formData.append("Blobfile", content); // 獲取上文中壓縮的內容，并放入formdata
        formData.append("objName", objName); // 將objName一起放入formdata
        progressBar("Model/UploadModel", formData, content.size); 
      }
  );
  return false;
}
/**
 * 將以base64的圖片url數(shù)據(jù)轉換為Blob
 * @param urlData
 * 用url方式表示的base64圖片數(shù)據(jù)
 */
 

http讀取圖片的時候會已base64編碼形式對到服務器，如果不進行重新編碼，則無法在圖片查看器中查看圖片

function convertBase64UrlToBlob(urlData) {
  var bytes = window.atob(urlData.split(",")[1]);
  //  處理異常,將ascii碼小于0的轉換為大于0
  var ab = new ArrayBuffer(bytes.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i);
  }
  return new Blob([ab], {type: "image/jpg"});
}