当前位置: 首页 > news >正文

vue下载文件

注意
请求时加入:responseType: 'blob'
url:写全了,因为前后端端口号不同
    downloadImage(imgUrl) {let formData = new FormData();formData.append('fileName', this.getFilename(imgUrl)); // 用于后端下载文件的路径axios.post('http://localhost:8080/competition/award/downloadFile', formData, {responseType: 'blob'}).then(response => {if (response.status == 200) {console.log(response)let url = window.URL.createObjectURL(new Blob([response.data])) // 将获取的文件转化为blob格式let a = document.createElement('a'); // 此处向下是打开一个储存位置a.style.display = 'none';a.href = url;// 下面两行是自己项目需要的处理,总之就是得到下载的文件名(加后缀)即可var fileName = this.getFilename(imgUrl);a.setAttribute('download', fileName+ '.jpg');document.body.appendChild(a);a.click();//点击下载document.body.removeChild(a);// 下载完成移除元素window.URL.revokeObjectURL(url);// 释放掉blob对象this.$message.success("文件下载成功") //删除弹窗} else {this.$message.error("文件下载失败")}})},getFilename(url) {// 从图片链接中提取文件名return url.substring(url.lastIndexOf('/')+1);},

注:此代码借鉴了其他博客
后端用的MinIO:

    @RequestMapping("/downloadFile")public ResponseEntity<byte[]> download(String fileName) throws Exception {return  minioUtils.download(fileName, FileConfig.awardImg);}

相关文章:

vue下载文件

注意请求时加入&#xff1a;responseType: bloburl&#xff1a;写全了&#xff0c;因为前后端端口号不同downloadImage(imgUrl) {let formData new FormData();formData.append(fileName, this.getFilename(imgUrl)); // 用于后端下载文件的路径axios.post(http://localhost:8…...

人人都是数据分析师-数据分析之数据图表可视化(下)

当前的BI报表、运营同学的汇报报告中数据图表大多为 表格、折线图、柱状图和饼图&#xff0c;但是实际上还有很多具有代表性的可视化图表&#xff0c;因此将对常见的可视化图表进行介绍&#xff0c;希望这些图表可视化方法能够更好的提供数据的可用性。 人人都是数据分析师-数…...

考勤、充电,绑身份,你的人员定位系统就缺它了!

我们做人脸识别智能发卡充电柜是要解决什么问题&#xff1f; &#xff08;1&#xff09;工地、港口等场景&#xff0c;人员流动大&#xff0c;管理难 在工地、港口等场景&#xff0c;人员组成通常比较复杂。有来自施工方、客户、各劳务队、各管理层的人员&#xff0c;以及来自…...

RocketMQ水平扩展及负载均衡详解

文章目录 Broker端水平扩展Broker负载均衡commit logProducer负载均衡Consumer负载均衡集群模式广播模式RocketMQ是一个分布式具有高度可扩展性的消息中间件。本文旨在探索在broker端,生产端,以及消费端是如何做到横向扩展以及负载均衡的。 Broker端水平扩展 Broker负载均衡…...

java接口笔记

关键字&#xff1a;interface 定义形式&#xff1a;interface 接口名 { 接口体 } 细节&#xff1a; 1.接口里的方法可以为抽象方法&#xff0c;静态方法&#xff0c;默认方法&#xff08;default 关键字&#xff09; 2.接口里的方法只能是public &#xff0c;可以不用写&a…...

安利安利-向大家推荐一个超级牛的etcd管理工具-EtcdKeeperFyne

etcd介绍 关于etcd的介绍大家可以看下这篇文章 etcd 开源仓库地址&#xff1a;EtcdKeeperFyne EtcdKeeperFyne 今天主要是向大家推荐一款使用起来特别方便的Etcd管理工具 EtcdKeeperFyne&#xff0c;具体运行起来的界面如下&#xff1a; 推荐原因 使用简单安装简单&…...

数字经济系列讲座-数字化平台(商业购物平台)

数字经济系列讲座 文章目录 钱的流向退货成本research questionLiterature review现金流发生在平台内侧平台商业模式转型Modelmodel 假设四种情形标记符利润函数&效用函数&平台效益模型构建利润对比图结论future directions讲座题目 To Adopt or not? The Impacts of…...

python3中collections模块详解

collections模块简介 collections包含了一些特殊的容器&#xff0c;针对Python内置的容器&#xff0c;例如list、dict、set和tuple&#xff0c;提供了另一种选择&#xff1b; namedtuple&#xff0c;可以创建包含名称的tuple&#xff1b; deque&#xff0c;类似于list的容器&a…...

护网面试题2.0

1.CSS和CSRF区别 通俗点讲的话&#xff1a; XSS通过构造恶意语句获取对方cookie&#xff0c; CSRF通过构造恶意链接利用对方cookie&#xff0c;但看不到cookie XSS比CSRF更加容易发生&#xff0c;但CSRF比XSS攻击危害更大 2.XSS原理 XSS&#xff08;Cross-Site Scripting&…...

学习计算机组成原理第1天(计算机发展历程)

计算机发展历程计算机硬件发展计算机软件的发展经典例题计算机硬件发展 计算机的四代变化 1&#xff09;第一代计算机&#xff08;1946-1957年&#xff09;电子管时代。特点&#xff1a;逻辑元件采用电子管&#xff1b;使用机器语言进行编程&#xff1b;主存用延迟线或磁鼓存储…...

二维字符数组与char** 关系 段错误打印

如下为错误&#xff0c;打印断错误。 具体原因参考 http://c.biancheng.net/view/2022.html 二维字符数组与char** 关系 原因&#xff1a; char a[2][20] ; 这是一个二维字符数组。 二维字符数组&#xff0c;这里相当于是两个一维字符串数组。这两个数组在内存的存放位置可以…...

从url输入到页面呈现发生了什么

从url输入到页面呈现发生了什么 1.URL解析 encodeURI / decodeURI 对整个URL的编码&#xff1a;处理空格/中文 let url "http://https://blog.csdn.net/api/ ?lx1&name科比&fromhttp://www.baidu.com/"; console.log(encodeURI(url));encodeURICompone…...

vue之--使用TypeScript

搭配 TypeScript 使用 Vue​ 像 TypeScript 这样的类型系统可以在编译时通过静态分析检测出很多常见错误。这减少了生产环境中的运行时错误&#xff0c;也让我们在重构大型项目的时候更有信心。通过 IDE 中基于类型的自动补全&#xff0c;TypeScript 还改善了开发体验和效率。…...

HDFD 回收站【Trash】机制

一、回收站 Trash 机制开启 HDFS本身是一个文件系统&#xff0c;默认情况下HDFS不开启回收站&#xff0c;数据删除后将被永久删除 添加并修改两个属性值可开启Trash功能 - (core-site.xml) <property> <name>fs.trash.interval</name> <value>1440&…...

【Redis】简介

简介 Redis是一个开源的内存数据结构存储系统&#xff0c;它支持多种数据结构&#xff08;如字符串、哈希、列表、集合、有序集合&#xff09;以及多种功能&#xff08;如事务、发布/订阅、Lua脚本执行等&#xff09;。Redis还提供了持久化功能&#xff0c;可以将数据存储到磁…...

【Go进阶】Goroutine 实现原理

目录 1、GMP模型 2、Goroutine调度策略 队列轮转 系统调用 工作量窃取...

TypeScript学习笔记之二(高级类型)

文章目录一、TypeScript高级类型1.1 class类1.2 class继承1.3 class类成员可见性1.4 readonly1.5 类型兼容性1.5.1 对象之间的类型兼容性1.5.2 接口之间类型兼容性1.5.3 函数之间类型兼容性1.6 交叉类型1.7 交叉类型(&)和继承(extends)的对比二、泛型2.1 泛型约束--指定更具…...

如何远程控制电脑?您只需要这样做

案例&#xff1a;在外面怎么远程控制电脑&#xff1f; “我学校教室有电脑&#xff0c;但我每次上课的时候还是需要带自己的电脑&#xff08;好重&#xff01;&#xff09;&#xff0c;只因为有些资料只在自己的电脑上。听说远程控制电脑可以解决这个问题&#xff0c;那如何远…...

【51单片机】:LED任务及汇编解释任务

学习目标&#xff1a; 1、用汇编或者c语言实现D1 D3 D5 D7 为一组 &#xff1b;D2 D4 D6 D8 为一组 &#xff0c;两组实现 1&#xff09;一组亮约一秒 另一组灭一秒&#xff0c;这样的互闪现象五次后 25分 2&#xff09;所有灯灭约一秒后&#xff0c; …...

从生活习惯到肠道微生物,揭秘胃肠道癌症的成因

谷禾健康 编辑​ 癌症一直是全球人类关注的重点&#xff0c;近年来癌症的发病率迅速增加&#xff0c;例如乳腺癌、前列腺癌和肺癌非常普遍。胃肠道癌在发病率和死亡率方面位居首位&#xff0c;并造成重大的社会经济负担。 胃肠道癌症包括胃癌、肝癌、食道癌、胰腺癌和结直肠癌等…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...