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

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

前端开发者常用网站

Can I use网站&#xff1a;一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use&#xff1a;Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站&#xff1a;MDN JavaScript权威网站&#xff1a;JavaScript | MDN...

基于stm32F10x 系列微控制器的智能电子琴(附完整项目源码、详细接线及讲解视频)

注&#xff1a;文章末尾网盘链接中自取成品使用演示视频、项目源码、项目文档 所用硬件&#xff1a;STM32F103C8T6、无源蜂鸣器、44矩阵键盘、flash存储模块、OLED显示屏、RGB三色灯、面包板、杜邦线、usb转ttl串口 stm32f103c8t6 面包板 …...