【前端】上传和下载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,点…...
【kafka】Golang实现分布式Masscan任务调度系统
要求: 输出两个程序,一个命令行程序(命令行参数用flag)和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽,然后将消息推送到kafka里面。 服务端程序: 从kafka消费者接收…...
TDengine 快速体验(Docker 镜像方式)
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现,展示如何创建和管理多个 OkHttpClient 实例,分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入(联动)2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
PAN/FPN
import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...
Java编程之桥接模式
定义 桥接模式(Bridge Pattern)属于结构型设计模式,它的核心意图是将抽象部分与实现部分分离,使它们可以独立地变化。这种模式通过组合关系来替代继承关系,从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...
C/C++ 中附加包含目录、附加库目录与附加依赖项详解
在 C/C 编程的编译和链接过程中,附加包含目录、附加库目录和附加依赖项是三个至关重要的设置,它们相互配合,确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中,这些概念容易让人混淆,但深入理解它们的作用和联…...
