摘要：因?yàn)楫惒綁嚎s的時(shí)候我們上傳的文件的數(shù)量不定，所以上面需要使用關(guān)鍵字來修飾壓縮過程。而下面的壓縮過程的實(shí)現(xiàn)，最終返回一個(gè)對(duì)象，當(dāng)壓縮過程已完成后，完整的生成的文件存于其中。

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

前端node.js + webpack 作前后臺(tái)分離，后端java

主要js代碼：

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

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

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

因?yàn)楫惒綁嚎s的時(shí)候我們上傳的文件的數(shù)量不定，所以上面需要使用await關(guān)鍵字來修飾壓縮過程。而下面的壓縮過程的實(shí)現(xiàn)，最終返回一個(gè)promise對(duì)象，當(dāng)壓縮過程已完成后，完整的生成的文件存于其中。

/**
 * 異步壓縮文件
 * @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;
      //  讀完轉(zhuǎn)一下格式
      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: { //  使用壓縮等級(jí)，1-9級(jí)，1級(jí)壓縮比最低，9級(jí)壓縮比最高
      level: 6,
    },
  }).then(
      function(content) {
        var formData = new FormData();
        formData.append("Blobfile", content); // 獲取上文中壓縮的內(nèi)容，并放入formdata
        formData.append("objName", objName); // 將objName一起放入formdata
        progressBar("Model/UploadModel", formData, content.size); 
      }
  );
  return false;
}
/**
 * 將以base64的圖片url數(shù)據(jù)轉(zhuǎn)換為Blob
 * @param urlData
 * 用url方式表示的base64圖片數(shù)據(jù)
 */
 

http讀取圖片的時(shí)候會(huì)已base64編碼形式對(duì)到服務(wù)器，如果不進(jìn)行重新編碼，則無法在圖片查看器中查看圖片

function convertBase64UrlToBlob(urlData) {
  var bytes = window.atob(urlData.split(",")[1]);
  //  處理異常,將ascii碼小于0的轉(zhuǎn)換為大于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"});
}