当前位置: 首页 > 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;并造成重大的社会经济负担。 胃肠道癌症包括胃癌、肝癌、食道癌、胰腺癌和结直肠癌等…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

(一)单例模式

一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...