【前端】上传和下载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"
/>
最后改为,不要设置超时。给接口多一点时间,有道理!
相关文章:
【前端】上传和下载zip文件,有进度条(el-progess)
文章目录 上传下载进度条 场景:要上传一个zip,调用接口,然后下载一个zip。调用接口的接口响应要显示在进度条中。 上传 上传用的是input原生控件,在页面中隐藏。accept"application/zip"限制只能上传zip。 点击button…...
2024年软件测试面试题,精选100+,附答案+文档
🍅 视频学习:文末有免费的配套视频可观看 🍅 点击文末小卡片 ,免费获取软件测试全套资料,资料在手,涨薪更快 Part1 1、你的测试职业发展是什么? 测试经验越多,测试能力越高。所以我…...
在vue项目的.gitignore文件忽略不想要提交到git仓库的文件
在Vue项目中,使用.gitignore文件来忽略不需要提交到Git仓库的文件是一个常见的做法。.gitignore文件包含了一系列的规则,这些规则告诉Git哪些文件或目录应该被忽略。以下是一些Vue项目中常用的.gitignore文件示例和具体规则说明: 示例 .gitig…...
时序(流式)图谱数据仓库AbutionGraph功能介绍-Streaming Graph OLAM Database
AbutionGraph是一款端到端的流式数据实时分析的图谱数据库,实时(流式写入实时、高QPS决策分析实时、流式预处理实时)表现在: 构建实时查询QPS响应时长与历史数据量无关的图模型;接入流式数据并实时更新图计算指标&…...
windows实现Grafana+Loki+loki4j轻量级日志系统,告别沉重的ELK
文章目录 Loki下载Loki下载安装Loki添加Loki数据源springboot日志推送 Loki下载 下载地址:https://github.com/grafana/loki/releases/ 找到loki-windows-amd64.exe.zip点击开始下载,我这里下载的2.9.9版本 Loki下载 下载地址:https://gr…...
跟《经济学人》学英文:2024年06月01日这期 The side-effects of the TikTok tussle
The side-effects of the TikTok tussle tussle:美 [ˈtəsəl] 激烈扭打;争夺 注意发音 side-effects:副作用;(side-effect的复数) As the app’s future hangs in the balance, the ramifications of …...
Ubuntu安装PostgreSQL
Ubuntu(在线版) 更新软件源 sudo apt-get update 添加PostgreSQL官方数字签名 wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add - 将地址添加到系统的软件包源列表中 echo "deb http://apt.postgresql.org/pub/repos/a…...
【HarmonyOS NEXT】鸿蒙如何让List组件不满一屏时,还要能滑动和回弹
当List组件不满一屏时,还要能滑动和回弹,就向系统设置 - 移动网络 页面一样 List设置如下属性: .edgeEffect(EdgeEffect.Spring, {alwaysEnabled: true}) edgeEffect edgeEffect(value: EdgeEffect, options?: EdgeEffectOptions) 设置边缘滑动效果。…...
JDK-SPI-服务提供者接口
归档 GitHub: JDK-SPI-服务提供者接口 SPI 源码说明 java.util.ServiceLoader /*** 服务加载器:给定接口,查找实现类。实现可迭代接口 */ public final class ServiceLoader<S> implements Iterable<S> {/*** 返回 ServiceLoader 实例 *…...
【docker】容器内配置环境变量
背景: 我要把下面的环境变量写到bash脚本里,起名叫environment_start.sh。 目的: 用于每次进入容器dev_into.sh的时候,让系统获取到环境变量。 操作步骤: 先在容器外找个合适的位置写环境变量bash脚本,…...
Java 乐观锁与悲观锁
1. 前言 本节内容主要是对 Java 乐观锁与悲观锁进行更加深入的讲解,本节内容更加偏重于对乐观锁的讲解,因为 synchronized 悲观锁对于大部分学习者并不陌生,本节主要内容如下: 乐观锁与悲观锁的概念,之前有所讲解,这里用很小的篇幅进行知识的回顾,巩固;乐观锁与悲观锁…...
python学习2-数据结构与算法-链表
单链表是一种链式存取的数据结构,用一组地址任意的存储单元存放线性表中的数据元素。链表中的数据是以结点来表示的,每个结点的构成:元素(数据元素的映象) 指针(指示后继元素存储位置),元素就是存储数据的存储单元,指…...
项目一 nfs 共享服务器 Haproxy 代理 Keepalive 高可用集群
深入理解程序的数据存储 配置NFS服务器 配置ansible环境...
TCP粘包解决方法
一. 产生原因及解决方法 产生原因:TCP是面向连接、基于字节流的协议,其无边界标记。当服务端处理速度比不其接收速度时,就很容易产生粘包现象。 解决方法:目前主要有两种解决方法,一个是在内容中添加分割标识…...
高职人工智能专业实训课之“生成对抗网络(GAN)”
一、前言 生成对抗网络(GAN)作为人工智能领域的一项重要技术,已经在图像生成、风格迁移、数据增强等多个领域展现出巨大的潜力和应用价值。为了满足高职院校对GAN专业实训课程的需求,唯众人工智能教学实训凭借其前沿的教育技术平…...
【MySQL系列】隐式转换
💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...
亿发:信息化建设or面子工程?究竟什么才是真正的信息化解决方案
在现代企业的竞争中,信息化建设扮演着越来越重要的角色。信息化技术不仅是企业提升管理效率、优化运营模式的利器,更是企业在市场竞争中脱颖而出的关键。然而,许多企业在推进信息化的过程中,往往容易陷入“面子工程”的误区。那么…...
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(1)
👨💻个人主页:开发者-曼亿点 👨💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨💻 本文由 曼亿点 原创 👨💻 收录于专栏:…...
树形结构C语言的实现
一.什么是树: 树形结构是一层次的嵌套结构。一个树形结构的外层和内层有相似的结构,所以这种结构多可以递归的表示。经典数据结构中的各种树状图是一种典型的树形结构:一棵树可以简单的表示为根,左子树,右子树。左子树…...
小程序渗透测试的两种方法——burpsuite、yakit
首先呢主要是配置proxifier,找到小程序的流量,然后使用burpsuite或者yakit去抓包。 一、使用burpsuiteproxifier的抓包测试 1、先配置proxifier,开启http流量转发 勾选确定 2、配置burp对应代理端口,选择profile,点…...
云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?
大家好,欢迎来到《云原生核心技术》系列的第七篇! 在上一篇,我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在,我们就像一个拥有了一块崭新数字土地的农场主,是时…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接:3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯,要想要能够将所有的电脑解锁&#x…...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
关于 WASM:1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么? WebAssembly(WASM) 是一种能在现代浏览器中高效运行的二进制指令格式,它不是传统的编程语言,而是一种 低级字节码格式,可由高级语言(如 C、C、Rust&am…...
爬虫基础学习day2
# 爬虫设计领域 工商:企查查、天眼查短视频:抖音、快手、西瓜 ---> 飞瓜电商:京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空:抓取所有航空公司价格 ---> 去哪儿自媒体:采集自媒体数据进…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象,只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意:它移动的位置必须是相连的有内容的单元格…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA:通过低成本全身远程操作学习双手移动操作 传统模仿学习(Imitation Learning)缺点:聚焦与桌面操作,缺乏通用任务所需的移动性和灵活性 本论文优点:(1)在ALOHA…...
推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)
推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...
【C++特殊工具与技术】优化内存分配(一):C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
Go语言多线程问题
打印零与奇偶数(leetcode 1116) 方法1:使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...
