JSZip前端上传压缩包，将压缩包里面的文件上传给后端

爱问问题的小李

已于 2023-11-15 08:54:51 修改

阅读量2.4k

点赞数 1

文章标签：前端 javascript 开发语言

于 2023-05-25 18:53:31 首次发布

本文链接：https://blog.csdn.net/weixin_43913004/article/details/130873096

版权

本文介绍如何使用el-upload组件结合JSZip库在前端处理上传的压缩包，解压后读取其中的图片，通过iconv-lite解决中文乱码问题，并将图片转换为Blob对象存储在数组中，最后以FormData形式提交给后端。

摘要由CSDN通过智能技术生成

需求

使用el-upload上传压缩包，用代码实现解压，之后把里面的图片传给后端保存
在这里插入图片描述

JSZIP

JSZip是一个用于创建、读取和编辑.zip文件的javascript库

安装

npm install jszip  或者 "jszip": "^3.10.1",

导入

<script>
import JSZip from 'jszip'
</script>

实例化

const zip = new JSZip();

el-upload版本

<el-upload
        class="upload-demo"
        action=""
        :http-request="uploadFile"
        :before-upload="handleBefore"  //最主要加入这个函数，下面是说明
        :on-change="handleChange"
        :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">上传数据模板.xlsx</div>
      </el-upload>

在这里插入图片描述

获取内部文件集合并将每个文件转成一定格式

handleBefore(file) {
	const zip = new JSZip();
        zip.loadAsync(file)
        .then(f=>{
          console.log('内部文件',f)
          for(let name in f.files){
             zip
            .file(name)
            .async("blob")
            .then(content=>{
              console.log('content',content)  //这里的content其实拿到的是文件内容的字节流
              globalFormDatas.append('files',content)
            })
          }
        }) 
}

在这里插入图片描述

中文乱码问题

npm i iconv-lite -S

let iconv = require('iconv-lite');
      zip.loadAsync(file,{
        decodeFileName: function (bytes) {
          return iconv.decode(bytes, 'gbk');
        }
      })

在这里插入图片描述

读取多级目录的文件并传给后端

用数组保存每一个file文件

handleBefore(file){
      const zip = new JSZip();
      let iconv = require('iconv-lite');
      zip.loadAsync(file,{
        decodeFileName: function (bytes) {
          return iconv.decode(bytes, 'gbk');
        }
      })
      .then(f=>{
        console.log('内部文件',f)
        this.formDatas = new FormData()
        for(let name in f.files){
          if(!f.files[name].dir){
          console.log('name',name,f.files)
            zip.file(name).async("blob").then(content=>{
              console.log('content',content,file)
              this.blobArr.push(new File([content], name, {type: content.type})) //用数组保存每一个file文件
              // this.formDatas.append('files',new File([blobArr], name, {type: content.type}))
              
            })
          }
        }
      }) 
    },

手动提交给后端

     let FormDatas = new FormData();
     this.blobArr.forEach(item=>{
       FormDatas.append('files',item)
      })
     apiName(FormDatas)
     .then(res => {
     })
     .catch(err => {this.loading = false});