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.限制

记得限制文件的大小以及类型，这里就很少描述