element plus解析zip文件上传

jszip.min.js
https://download.csdn.net/download/weixin_49295874/85151040

1.引入jszip.min.js

<script src="./jszip.min.js"></script>

2.使用el-upload组件

 <div style="width:120px">
      <el-upload :action="excelUrl" :multiple="false" accept=".zip" :limit="1" :before-upload="beforeAvatarUpload" :http-request="componentImport" :show-file-list="true" :file-list="fileList">
           <el-button size="small" type="primary">读取压缩包</el-button>
      </el-upload>
</div>
<el-button size="small" type="success" @click="uploadImg" class="uploadImg">上传服务器</el-button>

3.定义数据

fileList: [], // 储存文件列表
excelUrl:process.env.IMAGEURL + "xxxxx",
formData: null,

4.方法

// 验证文件格式是否正确
const beforeAvatarUpload = (file) => {
      let isFile =
        file.name.split(".")[file.name.split(".").length - 1] == "zip";
      if (!isFile) {
        ElMessage.error("导入文件格式不正确");
      }
      return isFile;
};
// 读取压缩文件
const componentImport = async (file) => {
      // 引用js
      const zip = new JSZip();
      // 解压Zip压缩包，参数默认是二进制
      const zipData = await zip.loadAsync(file.file);
      state.formData = new FormData();
      for (let key in zipData.files) {
        if (!zipData.files[key].dir) {
          // 判断是否是目录
          if (/\.(png)$/.test(zipData.files[key].name)) {
            // 判断是否是png文件
            let base = await zip.file(zipData.files[key].name).async("base64"); // 以base64输出文本内容
            // Base64 转 File 对象
            const result = dataURLtoFile(base, zipData.files[key].name);
            // console.log(result, "最终解压后的File对象");
            state.formData.append("file", result);
          }
        }
      }
      if (state.fileList.length == 1) {
        ElMessage.success("已成功读取完整zip压缩包");
      }
};
    /**
     * @description 将 base64 转换为 File 对象
     * @param {String} dataURL base64 的编码
     * @param {String} fileName 文件名称
     * @param {String} fileType 文件类型，默认为 png 类型
     * @returns {File} File 对象
     */
const dataURLtoFile = (dataURL, fileName, fileType = "image/png") => {
      /**
       * 注意：【不同文件不同类型】，例如【图片类型】就是`data:image/png;base64,${dataURL}`.split(',')
       * 下面的是【png文件(.png尾缀)】的文件类型拼接，一个完整的 base64 应该
       * 是这样的,例如： data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAABGdBTUEAALGPC/xhBQAAACBjSFJN
       */
      const arr = `data:${fileType};base64,${dataURL}`.split(",");
      const mime = arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      fileName = fileName.replace("nav/", "");
      let blob = new File([u8arr], fileName, { type: mime });
      return blob;
};
//上传服务器
const uploadImg = () => {
      const loadingInstance = ElLoading.service({
        lock: true,
        text: "上传中...",
        background: "rgba(256, 256, 256, 0.2)",
      });
      axios({
        method: "POST",
        url: state.excelUrl, //填写自己的接口
        data: state.formData, //填写包装好的formData对象
      }).then((res) => {
        if (res.data.code == 1) {
          ElMessage.success("上传成功");
        } else {
          ElMessage.error("上传失败");
        }
        nextTick(() => {
          loadingInstance.close();
        });
        //清除formData
        state.formData = null;
        // 清空文件列表
        state.fileList = [];
      });
};