首页 > 其他分享 >使用JSZip库解压后台返回的Blob格式文件,并回显到element-ui的el-upload组件

使用JSZip库解压后台返回的Blob格式文件,并回显到element-ui的el-upload组件

时间:2024-01-18 15:45:11浏览次数:33  
标签:el urlArr const 回显 JSZip 格式文件 let link

有一个报告列表,点击编辑的时候需要回显新建时上传的附件。后台提供了一个下载接口,但是会将所有上传的文件打包为一个压缩的blob。类似这种:

let urlArr = [];
      urlArr = urlArr.concat(this.downLoadUrl.split(";"));
      this.$http
        .downLoadFile({ url: urlArr.join(",") })
        .then(res => {
          const blob = new Blob([res.data]);
          let url = window.URL.createObjectURL(blob);
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", "附件.zip");
          document.body.appendChild(link);
          link.click();
        })

我需要把后台打包的文件解压之后回显。需要用到JSZip插件,需要安装一下。

npm install jszip

使用的页面引入。

import JSZip from "jszip";

最后就是先走接口取回数据,然后处理回显。

     let operateFileList = [];
        let urlArr = [];
        urlArr = urlArr.concat(data.fileUrl.split(";"));
        this.$http
          .downLoadFile({ url: urlArr.join(",") })
          .then(res => {
            const blobData = res.data;
            JSZip.loadAsync(blobData).then(zip => {
              const promises = [];
              zip.forEach((relativePath, zipEntry) => {
                promises.push(
                  zipEntry.async("blob").then(contentBlob => {
                    // 创建file对象
                    const file = new File([contentBlob], zipEntry.name, {
                      type: contentBlob.type
                    });
                    operateFileList.push({
                      name: zipEntry.name,
                      raw: file
                    });
                  })
                );
              });
              Promise.all(promises).then(() => {
                this.fileList = operateFileList;
              });
            });
          })

 

标签:el,urlArr,const,回显,JSZip,格式文件,let,link
From: https://www.cnblogs.com/junlinglife/p/17972617

相关文章

  • 【Python】datetime 时区转换, celery 结果 date_done比东八区晚8小时
    1.通过AsyncResult获取任务结果对象fromcelery.resultimportAsyncResultimportpytzfromdatetimeimportdatetime#根据任务ID获取任务结果对象result=AsyncResult(task_id)2.将UTC时间转为东八区时间#获取完成时间(UTC时间)date_done_utc=result.date_done......
  • springboot配置分页插件pageHelper和数据库方言的几种方式
    方式一:启动类配置分页插件(Application.java)1/**2*pageHelper分页插件3*/4@Bean5publicPageHelperByMyselfpageHelper(){6PageHelperByMyselfpageHelper=newPageHelperByMyself();7Propertiesproperties=newPr......
  • nerves 基于elixir 开发嵌入式系统
    nerves可以使我们基于elixir开发嵌入式系统,而且基于erlang强大的虚拟机能力实现可靠,高效的系统说明nerves包含了不少子系统,都可以加速系统的开发,值得学习下参考资料https://nerves-project.org/#featureshttps://github.com/grisp/grisphttps://erlangsolutions.medium.com/iot......
  • Spring ResourceLoader 总结
    ResourceLoader总结Spring将采用和ApplicationContext相同的策略来访问资源。也就是说,如果ApplicationContext是FileSystemXmlApplicationContext,res就是FileSystemResource实例;如果ApplicationContext是ClassPathXmlApplicationContext,res就是ClassPathResource实例当Spring应......
  • Makefile 使用 shell 命令
    转发自https://www.cnblogs.com/phillee/p/15020046.html0.前言前面一节我们学习了make的基本使用规则以及变量定义赋值方法,可以写一些简单的实例。Makefile学习笔记之变量定义与赋值target...:prerequisites...command......在使用make进行开发的过程中,我们常......
  • GEE数据集——哨兵2号Sentinel-2 云概率数据集
    简介S2云概率由sentinel2-cloud-detector库创建(使用LightGBM)。在应用梯度提升基础算法之前,先使用双线性插值法将所有波段上采样至10米分辨率。得到的0...1浮点概率被缩放为0...100,并存储为UINT8。缺少任何或所有波段的区域都会被屏蔽掉。数值较高的区域更有可能是云层或......
  • es安装分词插件elasticsearch-analysis-ik(elasticsearch-plugin方式安装)
    环境:OS:Centos7ES:6.8.5 1.查看当前的安装的插件[root@hadoop-slave1soft]#curl-uelastic:123456-XGET"http://192.168.1.63:19200/_cat/plugins?v&s=component&h=name,component,version,description&pretty"namecomponentversiondescription 2.将分......
  • (6)Powershell中命令自动补全功能及使用Windows命令
    (6)Powershell中命令自动补全功能及使用Windows命令上一节主要介绍了Powershell中常见的别名,以及怎么通过别名查看真实的Powershell命令,Powershell别名的命名规范以及如何新建自己的别名(Powershell内置别名不可更改)以及Powershell中兼容性别名,详细内容怼介里。在本节主要包含......
  • F - Teleporter Setting(建立虚点)
    F-TeleporterSetting题意:给出n个顶点和一些边,其中一些边两个端点确定,另一些边只有一个端点确定,对于每个i,令其为所有这些不确定的边的另一个端点,问1到n的最短距离是多少。建立一个虚点,然后f,g分别表示1,n到x的最短距离,分别计算两种经过i的情况,以及可能不经过i的情况即可。#i......
  • Shell - 集群监控脚本合集
      node_heart_check.sh#!/bin/bashscriptPath=$(dirname"$0")foripin`cat/etc/hosts|grep主机名关键字|awk'{print$2}'`;do#ping命令返回3次,自行中断ping-c3${ip}if[$?-ne0];thenecho${ip}"通信异常">>......