axios 实现上传、下载

 一、下载(支持批量下载)

  const downloadFile = (fileList) => {console.log(fileList, '下载list')fileList.forEach((e) => {const uid = uuidv4()const CancelToken = axios.CancelTokenlet source = CancelToken.source()transmissionStore().setDownloadSource('add', {workId: uid,axiosSource: source,})axios({url: `/xxxxxxxxx`,method: 'get',params: {id: uid,filePath: e.filePath,isDir: e.isDir,},responseType: 'blob',headers: {'Content-Type': 'application/json; charset=utf-8',workId: uid,},cancelToken: source.token,onDownloadProgress: function (progressEvent) {downloadLodashdebounce(uid, progressEvent) //节流推送if (progressEvent.total == progressEvent.loaded) {setTimeout(() => {transmissionStore().setDownloadSource('delete', {workId: uid,})}, 1000)}},}).then((res) => {const blob = new Blob([res.data], {type: 'application/octet-stream',})const url = window.URL.createObjectURL(blob)const a = document.createElement('a')a.href = urla.download = e.isDir ? `${e.fileName}.zip` : e.fileNamedocument.body.appendChild(a)a.click()document.body.removeChild(a)window.URL.revokeObjectURL(url)}).catch((error) => {console.log(error, '下载接口中断')})})proxy.$message({message: '已添加至传输列表',type: 'success',})}// 中断接口下载
source.cancel(`取消下载`)

二、上传(支持批量上传)

  const uploadFile = (e, is_file) => {const path = info.filePathList.join('/')const pathValue = path ? `${userData.value.username}/` + path : ''let file_lists = Object.values(e.target.files)console.log(file_lists, '上传list')if (file_lists.length > 0 && file_lists.length <= 30) {file_lists.forEach((item) => {const uid = uuidv4()const formData = new FormData()formData.append('fileName', item.name)formData.append('file', item)formData.append('filePath', pathValue)if (!is_file) {let folderName = item.webkitRelativePath.split('/')folderName.pop()formData.append('dirName', folderName.join('/'))}const CancelToken = axios.CancelTokenlet source = CancelToken.source()transmissionStore().setUploadSource('add', {workId: uid,axiosSource: source,})axios({url: `/xxxxx/upload`,method: 'post',data: formData,headers: {workId: uid,},cancelToken: source.token,onUploadProgress: function (progressEvent) {lodashdebounce(uid, progressEvent, formData) //节流推送if (progressEvent.total == progressEvent.loaded) {setTimeout(() => {transmissionStore().setUploadSource('delete', {workId: uid,})}, 1000)}},}).then((res) => {}).catch((error) => {console.log(error, '上传接口中断')transmissionStore().setOperationObj({type: 'filecancel',data: {id: uid,fileName: formData.get('fileName'),},})})})nextTick(() => {file_ref.value.value = nullfolder_ref.value.value = null})proxy.$message({message: '已添加至传输列表',type: 'success',})} else {proxy.$message({message: '文件数量超过限制,最多可上传30个。',type: 'warning',})nextTick(() => {file_ref.value.value = nullfolder_ref.value.value = null})}}// 中断接口上传
source.cancel(`取消上传`)

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

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

相关文章

Django中实现JWT(构成原理、base64)

Django中实现JWT(构成原理、base64) 目录 Django中实现JWT(构成原理、base64)简介JWT的构成原理base64的使用手动验证token 简介 JWT (JSON Web Token)通常用于对用户进行身份验证和授权&#xff0c;是一种无状态的认证机制&#xff0c;通过在用户和服务器之间传递加密的令牌来…

jenkins修改全局安全配置之后登录错误

教训&#xff08;流泪&#xff09; 事情是这样的&#xff0c;第一次我需要用单点登录集成jenkins&#xff0c;jenkins可以通过插件的方式支持cas协议&#xff0c;我当时也不很懂&#xff0c;经过我学网上的一顿乱配置&#xff0c;jenkis上不去了&#xff0c;虽然这是公司本地环…

大数据——Zookeeper ZBA协议(四)

Zookeeper ZAB协议 概述 ZAB(Zookeeper Automic Broadcast)是一套专门为Zookeeper设计的用于进行原子广播和崩溃恢复的协议ZAB协议主要包含了两个功能 原子广播&#xff1a;保证数据一致性崩溃恢复&#xff1a;保证集群的高可用 ZAB协议本身是基于2PC算法来进行的设计&#…

记一次 Vscode + Latex 正向/反向搜索忽然失效

遥望大半个月前&#xff0c;完成论文撰写后&#xff0c;这些天虽然多次打开项目&#xff0c;但我真的一个字都没动过&#xff0c;今天想着开始着手修改一下&#xff0c;打开项目发现正向/反向搜索忽然失效了&#xff0c;感觉浑身有蚂蚁在爬&#xff0c;思索再三后找到问题&…

【数学归纳法 反证法】菲蜀定理

裴蜀定理&#xff08;或贝祖定理&#xff0c;Bzout’s identity&#xff09;得名于法国数学家艾蒂安裴蜀&#xff0c;说明了对任何整数a、b和它们的最大公约 数d&#xff0c;关于未知数x和y的线性不定方程&#xff08;称为裴蜀等式&#xff09;&#xff1a;若a,b是整数,且&…

[测试]ChaosBlade: 丢包、延迟、断网、磁盘、cpu占用、内存占用等资源耗尽故障注入利器--编辑中

目录 ChaosBlade是什么? ChaosBlade可以制造哪些工况/故障? 使用文档 git仓库:chaosblade/README_CN.md at master chaosblade-io/chaosblade GitHub ChaosBlade是什么? ChaosBlade: 一个简单易用且功能强大的混沌实验实施工具 ChaosBlade是阿里巴巴开源的一款遵循混…

根据出生日期确定属相 出生日期判断生肖

目录 一.总体说明 二.完整代码 三.逐行分析 一.总体说明 生肖是一个古老的中国文化概念,也称为属相。它是根据农历年份来划分的十二个不同的动物符号,每个动物代表一个特定的年份周期。这十二个生肖分别是:鼠、牛、虎、兔、龙、蛇、马、羊、猴、鸡、狗和猪。 每个生肖都…

2024系统架构师---论软件系统架构评估

对于软件系统,尤其是大规模的复杂软件系统来说,软件的系统架构对于确保最终系统的质量具有十分重要的意义,不恰当的系统架构将给项目开发带来高昂的代价和难以避免的灾难。对一个系统架构进行评估,是为了:分析现有架构存在的潜在风险,检验设计中提出的质量需求,在系统被构…

[图解]软件开发中的糊涂用语-04-为什么要追究糊涂用语

0 00:00:00,030 --> 00:00:05,620 今天呢&#xff0c;我们来说一个为什么要追究糊涂用语的问题 1 00:00:06,310 --> 00:00:06,548 2 00:00:06,548 --> 00:00:11,077 大家知道我们前些天都发了好几个视频 3 00:00:11,077 --> 00:00:13,461 追究这个糊涂用语 4 00…

如何搭建一个vue2组件库(king-ui-pro)

文章引用图片无法查看&#xff0c;直接查看原文 感兴趣的可以关注或订阅下这个系列&#xff0c;后续会陆续将相关的组件与公共方法进行分享 目前已经完成了的组件有 多行省略pro版&#xff0c;不是简单的多行省略效果 公共方法&#xff1a; 1、图片预览&#xff0c;知乎的图…

sql知识总结三

3.floor报错注入 &#xff08;1&#xff09;涉及到的函数 as 别名&#xff0c;group by 分组 >select concat_ws(-,(select database()),floor(rand()*2)) as a from users group by a; count()函数 汇总统计数量 >select count(*),concat_ws(-,(select database(0…

Attention和Transformer灵魂七问

1. 引言 最近&#xff0c;ChatGPT和其他聊天机器人将大语言模型LLMs推到了风口浪尖。这就导致了很多不是学ML和NLP领域的人关注并学习attention和Transformer模型。在本文中&#xff0c;我们将针对Transformer模型结构提出几个问题&#xff0c;并深入探讨其背后的技术理论。这…

YoloV9改进策略:下采样改进|自研下采样模块(独家改进)|疯狂涨点|附结构图

文章目录 摘要自研下采样模块及其变种第一种改进方法 YoloV9官方测试结果改进方法测试结果总结 摘要 本文介绍我自研的下采样模块。本次改进的下采样模块是一种通用的改进方法&#xff0c;你可以用分类任务的主干网络中&#xff0c;也可以用在分割和超分的任务中。已经有粉丝用…

【电控笔记5.4】pwm延迟

PWM延迟 1标准采样法 Td=MCU计算延迟+输出延迟 Tcon=电流控制周期 Ts=PWM载波周期 Td=1.5Ts(6.3节 ) 电流环跟PWM采样周期同步 2修改采样法

解决Valid在@RequestParam场景不生效的问题

项目场景&#xff1a; 最近帮同事在看一个后端接口数据关于类型、长度、字符内容规范化的任务&#xff0c;想到了使用Valid注解的方式来完成&#xff0c;但是在实际使用的时候&#xff0c;发现前后端数据在不同场景下交互方式的差异&#xff0c;会导致Valid注解使用不生效。 问…

AR HUD_VSLAM+显示技术

智能座舱的一个重要技术方向是表达与展示。HUD可以将驾驶相关的信息&#xff0c;如车速、导航等投射到驾驶员的视线上方&#xff0c;避免驾驶员的目光离开前方道路。这种显示方式可以提供关键信息的实时展示&#xff0c;减少驾驶员的分心。 HUD的技术原理就是通过光学系统将信息…

k8s whereabouts 使用

Whereabouts简介 whereabouts是一个cluster-wide&#xff08;集群级别&#xff09;的IPAM插件&#xff0c;非常适合用在NetworkAttachment的场景。之前我们描述过k8s为分配地址使用的是ipam&#xff0c;常见的ipam类型为host-local&#xff0c;calico-ipam。whereabouts是一款…

【PCL】教程global_hypothesis_verification 通过验证模型假设来实现 3D 对象识别与位姿估计...

测试程序1 milk.pcd milk_cartoon_all_small_clorox.pcd 终端输出1&#xff1a; Model total points: 12575; Selected Keypoints: 193 Scene total points: 307200; Selected Keypoints: 7739 [pcl::SHOTEstimation::computeFeature] The local reference frame is not valid!…

初入单元测试

单元测试&#xff1a;针对最小的功能单元(方法)&#xff0c;编写测试代码对其进行正确性测试 Junit可以用来对方法进行测试&#xff0c;虽然是有第三方公司开发&#xff0c;但是很多开发工具已经集成了&#xff0c;如IDEA。 Junit 优点&#xff1a;可以灵活的编写测试代码&am…

【C++】类和对象初探:类的实例化与对象生命周期管理,解析this指针的奥秘

欢迎来到CILMY23的博客 本篇主题为&#xff1a; 类和对象初探&#xff1a;类的实例化与对象生命周期管理&#xff0c;解析this指针的奥秘 个人主页&#xff1a;CILMY23-CSDN博客 系列专栏&#xff1a;Python | C | C语言 | 数据结构与算法 感谢观看&#xff0c;支持的可以给…