【前端】上传和下载zip文件,有进度条(el-progess)

文章目录

    • 上传
    • 下载
    • 进度条

场景:要上传一个zip,调用接口,然后下载一个zip。调用接口的接口响应要显示在进度条中。

上传

上传用的是input原生控件,在页面中隐藏。accept="application/zip"限制只能上传zip。
点击button实现上传,调用input原生组件的方法。

<el-buttontype="primary"size="large"@click="uploadSrt">上传srt</el-button
>
<inputref="srtInput"type="file"style="display: none"accept="application/zip"@change="handleUploadSrt"/>

在event中拿到上传的文件file。

注意,要使用formData和'Content-Type': 'multipart/form-data',以支持二进制的传输。

不能用application/json的响应头,File对象不能被序列化为JSON。

详情看注释。

uploadSrt() {this.$refs.srtInput.click()
},
// input原生控件的上传事件,file是拿到的文件
handleUploadSrt(event) {const file = event.target.files[0]this.upload(file)
},upload(file) {// 用FormData,支持二进制数据传输let formData = new FormData()formData.append('file', file)axios.post('url', formData, {headers: {'Content-Type': 'multipart/form-data',},//   进度条进度onDownloadProgress: (progressEvent) => {if (progressEvent.total > 0) {this.srtProgress = Math.round((progressEvent.loaded * 100) / progressEvent.total)} else {this.srtProgress = 100 // 防止progressEvent.total为0出现无限大}},timeout: 10000, // 设置超时时间,若接口在10s内没响应就抛出异常,在catch中捕获}).then((response) => {// 响应后的逻辑}).catch((error) => {// 异常的逻辑})
},

下载

请求某个接口下载文件。

请求要设置参数,表示是二进制文件:responseType: 'blob'
创建一个url和a标签,点击a标签则下载。

download(type) {let url = 'url'axios.get(url, { responseType: 'blob', timeout: 10000 }).then((res) => {const fileName='' // 设置下载的文件名// 创建一个下载url和a标签const downloadUrl = window.URL.createObjectURL(new Blob([res.data])) // res.data 是要下载的文件const link = document.createElement('a')link.href = downloadUrl// 设置download属性,点击链接就能下载link.setAttribute('download', `${fileName}`)// 将a标签加在文档中,点击下载document.body.appendChild(link)link.click()        }).catch((error) => {// ...})},

进度条

用ElementPlus的组件el-progress,传入一个srtProgress即可。不过效果是一下就闪到100了(可能是接口响应很快??)。

<el-progress:percentage="srtProgress"status="warning":stroke-width="12"
/>

最后改为,不要设置超时。给接口多一点时间,有道理!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/41376.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【unity实战】Unity中使用A*寻路+有限状态机制作一个俯视角敌人AI

最终效果 文章目录 最终效果前言A*寻路插件介绍下载导入AI插件生成寻路网格节点的类型障碍物寻路测试A*只打印报错信息 代码控制寻路动画配置敌人状态机各种状态脚本效果完结 前言 前面做过有限状态机制作一个敌人AI&#xff1a;【unity实战】在Unity中使用有限状态机制作一个…

vxe-table合并行数据;element-plus的el-table动态合并行

文章目录 一、vxe-table合并行数据1.代码 二、使用element-plus的el-table动态合并行2.代码 注意&#xff1a;const fields 是要合并的字段 一、vxe-table合并行数据 1.代码 <vxe-tableborderresizableheight"500":scroll-y"{enabled: false}":span-m…

信创-办公软件应用工程师认证

随着国家对信息技术自主创新的战略重视程度不断提升&#xff0c;信创产业迎来前所未有的发展机遇。未来几年内&#xff0c;信创产业将呈现市场规模扩大、技术创新加速、产业链完善和国产化替代加速的趋势。信创人才培养对于推动产业发展具有重要意义。应加强高校教育、建立人才…

【信息学奥赛】CSP-J/S初赛07 排序算法及其他算法在初赛中的考察

本专栏&#x1f449;CSP-J/S初赛内容主要讲解信息学奥赛的初赛内容&#xff0c;包含计算机基础、初赛常考的C程序和算法以及数据结构&#xff0c;并收集了近年真题以作参考。 如果你想参加信息学奥赛&#xff0c;但之前没有太多C基础&#xff0c;请点击&#x1f449;专栏&#…

全面掌握如何应对DDoS攻击,一文带你轻松保护网站安全

一、引言 在当今互联网时代&#xff0c;DDoS&#xff08;Distributed Denial of Service&#xff0c;分布式拒绝服务&#xff09;攻击已经成为威胁网站安全的主要手段之一。这种攻击通过大量恶意流量占用服务器资源&#xff0c;导致网站无法正常访问。如何有效应对DDoS攻击&am…

C++|海康摄像头实时预览时设置音量大小

使用海康API设置音量的函数是&#xff1a;NET_DVR_OpenSound。 在实际代码中我遇到了以下问题&#xff1a; 1&#xff1a;调用NET_DVR_OpenSound接口一直返回失败&#xff0c;错误是调用顺序出错。 2&#xff1a;音量设置不成功。 对于以上两种问题&#xff0c;我相信很多人…

实现Java应用的数据加密与解密技术

实现Java应用的数据加密与解密技术 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 1. 数据加密与解密的重要性 数据安全是当今互联网应用开发中的重要问题之…

FineBI在线学习资源-数据处理

FineBI在线学习资源汇总&#xff1a; 学习资源 视频课程 帮助文档 问答 数据处理学习文档&#xff1a; 相关资料&#xff1a; 故事背景概述-https://help.fanruan.com/finebi6.0/doc-view-1789.html 基础表处理-https://help.fanruan.com/finebi6.0/doc-view-1791.html …

六西格玛绿带培训如何告别“走过场”?落地生根

近年来&#xff0c;六西格玛绿带培训已经成为了众多企业提升管理水平和员工技能的重要途径。然而&#xff0c;不少企业在实施六西格玛绿带培训时&#xff0c;往往陷入形式主义的泥潭&#xff0c;导致培训效果大打折扣。那么&#xff0c;如何避免六西格玛绿带培训变成“走过场”…

【重磅】万能模型-直接能换迪丽热巴的模型

万能模型&#xff0c;顾名思义&#xff0c;不用重新训练src&#xff0c;直接可以用的模型&#xff0c;适应大部分原视频脸 模型用法和正常模型一样&#xff0c;但可以跳过训练阶段&#xff01;直接到合成阶段使用该模型 本模型没有做Xseg&#xff0c;对遮挡过多的画面不会自动适…

LiteFlow介绍、原理解析以及应用场景

LiteFlow介绍 LiteFlow是一个由Baidu开源的轻量级、快速、稳定且可编排的组件式规则引擎框架。它专注于逻辑驱动流程编排&#xff0c;通过组件化方式快速构建和执行业务流程&#xff0c;有效解耦复杂业务逻辑。LiteFlow的设计基于工作台模式&#xff0c;其中每个业务组件相当于…

【C++】 解决 C++ 语言报错:Double Free or Corruption

文章目录 引言 双重释放或内存破坏&#xff08;Double Free or Corruption&#xff09;是 C 编程中常见且严重的内存管理问题。当程序尝试多次释放同一块内存或对已经释放的内存进行操作时&#xff0c;就会导致双重释放或内存破坏错误。这种错误不仅会导致程序崩溃&#xff0c…

谷粒商城学习-07-虚拟机网络设置

文章目录 一&#xff0c;找到配置文件Vagrantfile二&#xff0c;查询虚拟机网卡地址1&#xff0c;查看虚拟机网络配置2&#xff0c;查看宿主机网络配置 三&#xff0c;修改配置文件下的IP配置四&#xff0c;重新启动虚拟机即可生效五&#xff0c;Vagrantfile 的作用1&#xff0…

Java项目:基于SSM框架实现的校园快递代取管理系统【ssm+B/S架构+源码+数据库+毕业论文】

一、项目简介 本项目是一套基于SSM框架实现的校园快递代取管理系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简单、…

Solo 开发者周刊 (第12期):连接独立开发者,共享开源智慧

这里会整合 Solo 社区每周推广内容、产品模块或活动投稿&#xff0c;每周五发布。在这期周刊中&#xff0c;我们将深入探讨开源软件产品的开发旅程&#xff0c;分享来自一线独立开发者的经验和见解。本杂志开源&#xff0c;欢迎投稿。 产品推荐 1、Soju————一个现代的书签…

【C++】 解决 C++ 语言报错:Undefined Reference

文章目录 引言 未定义引用&#xff08;Undefined Reference&#xff09;是 C 编程中常见的错误之一&#xff0c;通常在链接阶段出现。当编译器无法找到函数或变量的定义时&#xff0c;就会引发未定义引用错误。这种错误会阻止生成可执行文件&#xff0c;影响程序的正常构建。本…

探索 Kali Linux:定义、架构、原理、应用场景及常见命令体系

Kali Linux 是一个广受欢迎的开源 Linux 发行版&#xff0c;专门为信息安全工作者和渗透测试员设计。本文将深入探讨 Kali Linux 的定义、架构、工作原理、应用场景&#xff0c;以及常用命令&#xff0c;帮助读者全面了解这个强大的安全工具。 一、Kali Linux 的定义 Kali Lin…

扁鹊三兄弟的启示,探寻系统稳定的秘诀

一、稳定性的重要性 1. 公司收益的角度 从公司收益的视角审视&#xff0c;系统不稳定可能会引发直接损失。例如&#xff0c;当系统突然出现故障导致交易中断时&#xff0c;可能造成交易款项的紊乱、资金的滞留或损失&#xff0c;这不但会阻碍当前交易的顺利完成&#xff0c;还…

SpringbootAOP的入门程序

1、SpringbootAOP的入门 1、添加依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId> </dependency>2、写serivce代码 public interface IUserService {void save();void …

长沙(市场调研公司)源点 企业如何决定是否需要开展市场调研?

长沙源点调研咨询认为&#xff1a;对于一个特定问题&#xff0c;管理者在面临几种解决问题的方案时&#xff0c;不应该凭直觉草率开展应用性市场调研。事实上&#xff0c;首先需要做的决策是是否需要开展调研。在下述情况下&#xff0c;最好不要做调研&#xff1a; *缺乏资源。…