vue使用jszip來打包文件上傳到阿里雲服務器

1.需求場景

最近項目有這麼一個需求，要配置資源包的方案，好比一些資源要打包成一個zip，傳到阿里雲服務器，而後後端去處理解壓這些數據

2.引入

我是ts項目哈，因此直接就是

cnpm install @types/jszip
cnpm install @types/file-saver
複製代碼

若是須要下載zip的話就須要引入file-saver

3.怎麼使用

/** */
zip(fileList: any, fileName: string) {
    let that=this;
    let zip = new jsZip();
    for (let i = 0; i < fileList.length; i++) {
      zip.file(fileList[i].name, fileList[i]);
    }
    zip
      .generateAsync({
        type: "blob",
        compression: "DEFLATE", 
        compressionOptions: {
          level: 8  //壓縮等級 1-9 1是最低，9是最高
        }
      })
      .then(function(content) {
        // FileSaver.saveAs(content,"abc.zip");
        console.log(content);
        that.getOSSAccessData.envFlag = that.getEnvFlag();
        that.getOSSAccessData.signature = "dev";
        that.getOSSAccessData.path = "dev";
        //找後端拿OSS簽名
        xxxx.getOSSAccess(that.getOSSAccessData)
          .then(response => {
            var formData = new FormData();
            formData.append("key", response.returnObject.dir + fileName);
            formData.append("policy", response.returnObject.policy); //policy
            formData.append("OSSAccessKeyId", response.returnObject.accessId); //accessKeyId
            formData.append("success_action_status", "200"); //成功後返回的操做碼
            formData.append("signature", response.returnObject.signature); //簽名
            var fileeee = new File([content], fileName); //oss直傳好像不支持blob,因此文件要轉file
            formData.append("file", fileeee);
            var promise = fetch(response.returnObject.host, {
              method: "POST",
              body: formData
            }).then(response => {
              console.log(response);
            });
          })
          .catch(() => {});
      });
  }
複製代碼

4.限制

記得限制文件的大小以及類型，這裏就很少描述