jszip实现多层目录多文件压缩成zip上传到服务器或下载功能

参考链接

http://docs.asprain.cn/jszip/jszip.html#jszip_file_data
https://www.5axxw.com/questions/simple/ymoww2

功能实现

1,安装依赖

npm install jszip
npm install file-saver

2,页面代码

<FormItem
 v-for="(item, index) in currentResultReviewCatalogs.stageChild"
  :key="index"
  :label="item.childName"
  :label-width="170">
  <div
    v-for="(item2, index2) in item.catalogs"
    :key="index2">
    <span>{{ item2 }}</span>
    <div
      @click="getCurrentFolder(item.childName,item2)">
      <Upload
        :before-upload="handleUpload"
        action="//jsonplaceholder.typicode.com/posts/"
        multiple
      >
        <Button icon="ios-cloud-upload-outline">点击上传文件</Button>
      </Upload>
      <div
        v-for="(fileStage, index3) in uplodaFileList"
        :key="index3">
        <div v-if="fileStage.path === item.childName+'-'+item2">
          <div
            v-for="(file, index4) in fileStage.file"
            :key="index4">
            {{ file.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</FormItem>

而this.currentResultReviewCatalogs.stageChild的值是配置出来的(目录层级)

<resultReviewItem>
  <stages>
      <stagename>不动产预售、竣工验收和不动产登记</stagename>
      <stageChild>
        <childName>不动产预测</childName>
        <catalogs>成果数据归档</catalogs>
        <catalogs>空间数据归档</catalogs>
        <catalogs>其他数据归档</catalogs>
      </stageChild>
      <stageChild>
        <childName>规划条件核实测量</childName>
        <catalogs>成果数据归档</catalogs>
        <catalogs>空间数据归档</catalogs>
        <catalogs>其他数据归档</catalogs>
      </stageChild>
      <stageChild>
        <childName>土地核验测量</childName>
        <catalogs>成果数据归档</catalogs>
        <catalogs>空间数据归档</catalogs>
        <catalogs>其他数据归档</catalogs>
      </stageChild>
      <stageChild>
        <childName>人防核实测量</childName>
        <catalogs>成果数据归档</catalogs>
        <catalogs>空间数据归档</catalogs>
        <catalogs>其他数据归档</catalogs>
      </stageChild>
      <stageChild>
        <childName>建设工程配套绿地测量</childName>
        <catalogs>成果数据归档</catalogs>
        <catalogs>空间数据归档</catalogs>
        <catalogs>其他数据归档</catalogs>
      </stageChild>
      <stageChild>
        <childName>地下管线工程核实测量</childName>
        <catalogs>成果数据归档</catalogs>
        <catalogs>空间数据归档</catalogs>
        <catalogs>其他数据归档</catalogs>
      </stageChild>
      <stageChild>
        <childName>不动产实测</childName>
        <catalogs>成果数据归档</catalogs>
        <catalogs>空间数据归档</catalogs>
        <catalogs>其他数据归档</catalogs>
      </stageChild>
    </stages>
 </resultReviewItem>

页面效果

3,文件上传处理处理

handleUpload(file){
      let listHasFileFolder = this.uplodaFileList.find(item=> item.path ===  this.currentDoubleFolderName);
      if (this.uplodaFileList.length === 0 || !listHasFileFolder) {
        this.uplodaFileList.push({
          path:this.currentDoubleFolderName,
          file:[file]
        });
      }else{
        this.uplodaFileList.find(item=> item.path ===  this.currentDoubleFolderName).file.push(file);
      }
      //返回false阻止上传
      return false;
    },

将上传的文件按照一级目录 + ‘-’ + 二级目录的形式存在list中

4,文件压缩处理

const jszip = new JSZip();
 this.uplodaFileList.forEach(item => {
   //根据path创建两级目录
   let folderArr = item.path.split('-');
   let tempfolder = hasFolder ? jszip.folder(this.work.catalogname).folder(folderArr[0]).folder(folderArr[1]) : jszip.folder(this.work.projectno).folder(this.work.catalogname).folder(folderArr[0]).folder(folderArr[1]);
   if (item.file.length > 0) {
     item.file.forEach(file => {
       tempfolder.file(file.name,file,{binary:true});
     });
   }
 });
 jszip.generateAsync({ type: 'blob' }).then(function (content) {
   FileSaver.saveAs(content, 'test_shinoda.zip');
 });

如需表单提交到服务端

this.uplodaFileList.forEach(item => {
 //根据path创建两级目录
  let folderArr = item.path.split('-');
  let tempfolder = hasFolder ? jszip.folder(this.work.catalogname).folder(folderArr[0]).folder(folderArr[1]) : jszip.folder(this.work.projectno).folder(this.work.catalogname).folder(folderArr[0]).folder(folderArr[1]);
  if (item.file.length > 0) {
    item.file.forEach(file => {
      tempfolder.file(file.name,file,{binary:true});
    });
  }
});
let reviewid = this.scid;
let workTemp = this.work;
jszip.generateAsync({ type: 'blob' }).then(function (content) {
  let catalogid = hasFolder ? result.data.data[0].id : '';
  let pFolderName = hasFolder ? workTemp.catalogname : workTemp.projectno;
  let regioncode = sessionStorage.getItem('district') ;
  let blob = new File([content], pFolderName+'.zip');
  // 空的formData实例对象
  let formData = new FormData();
  // 给formData添加数据
  formData.set('file',blob);
  formData.set('reviewid',reviewid);
  formData.set('catalogid',catalogid);
  formData.set('regioncode',regioncode);
  //文件上传
  axios({
    method: 'post',
    url: appConfig.app.serviceHost + '/onemap-plan/planresult/review/file/uploadfile',
    headers: {
      'Content-Type': 'multipart/form-data',
    },
    data: formData,
  }).then(data => {
    console.log('data', data);
  })
  .catch(error => {
    console.log('data', error);
  });
});

文件压缩过后效果