前端将后端返回的文件下载到本地

news2024/11/12 10:35:58
  1. vue 将后端返回的文件地址下载到本地
  • template 拿到后端返回的文件路径
<el-button link type="success" icon="Download" @click="handleDownload(file)"> 附件下载 </el-button>
  • script 里面写方法
function handleDownload(val) {
  const url = import.meta.env.VITE_APP_BASE_API + val  // 本地地址加文件路径
  const link = document.createElement('a')
  link.href = url
  link.setAttribute('download', `附件_${new Date().getTime()}`)
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}
  1. uniapp 将后端返回的文件地址下载到本地
  • template 拿到后端返回的文件路径
<uni-forms-item label="文件:" name="excelFilePathView">
	<uni-file-picker fileMediatype="all" v-model="form.excelFilePathView" @select="selectFilePath" />
	<view v-for="(file,index) in form.excelFilePathView" :key="index">
		<a style="color:#00aaff" :href="file.url" target="_blank"> 查看 {{ index+1 }}</a>
	</view>
</uni-forms-item>
  • script 里面写方法
selectFilePath(e) {
	const tempFilePaths = e.tempFilePaths
	const imgUrl = tempFilePaths[0]
	uni.uploadFile({
		url: config.baseUrl + "/common/upload",
		filePath: imgUrl,
		name: 'file',
		header: {
			"Authorization": 'Bearer ' + getToken()
		},
		success: (uploadFileRes) => {
			let path = JSON.parse(uploadFileRes.data)
			this.form.excelFilePathView.push({
				name: path.fileName,
				url: path.fileName
			})
		}
	})
},

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

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

相关文章

《深度学习神经网络:颠覆生活的魔法科技与未来发展新航向》

深度学习神经网络对我们生活的影响 一、医疗领域 深度学习神经网络在医疗领域的应用可谓意义重大。在疾病诊断方面&#xff0c;它能够精准分析医疗影像&#xff0c;如通过对大量的 CT、MRI 图像进行深度学习&#xff0c;快速准确地识别出微小的肿瘤病变&#xff0c;为医生提供…

基于 SSM(Spring + Spring MVC + MyBatis)框架构建电器网上订购系统

基于 SSM&#xff08;Spring Spring MVC MyBatis&#xff09;框架构建电器网上订购系统可以为用户提供一个方便快捷的购物平台。以下将详细介绍该系统的开发流程&#xff0c;包括需求分析、技术选型、数据库设计、项目结构搭建、主要功能实现以及前端页面设计。 需求分析 …

C++入门基础知识142—【关于C++ 友元函数】

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///C爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于C 友元函数的相关内容&#xff01; 关于…

密码学是如何保护数据传输的安全性?

密码学通过一系列算法和协议来保护数据传输的安全性。 一、加密技术 对称加密算法 原理&#xff1a;使用相同的密钥进行加密和解密。应用&#xff1a;在数据传输过程中&#xff0c;发送方和接收方共享一个密钥&#xff0c;数据在传输前被加密&#xff0c;接收方使用相同的密钥…

让Apache正确处理不同编码的文件避免中文乱码

安装了apache2.4.39以后&#xff0c;默认编码是UTF-8&#xff0c;不管你文件是什么编码&#xff0c;统统按这个来解析&#xff0c;因此 GB2312编码文件内的中文将显示为乱码。 <!doctype html> <html> <head><meta http-equiv"Content-Type" c…

SCUI Admin + Laravel 整合

基于 Vue3 和 Element Plus 和 Laravel 整合开发 项目地址&#xff1a;持续更新 LaravelVueProject: laravel vue3 scui

51单片机应用开发(进阶)---定时器应用(电子时钟)

实现目标 1、巩固定时器的配置流程&#xff1b; 2、掌握按键、数码管与定时器配合使用&#xff1b; 3、功能1&#xff1a;&#xff08;1&#xff09;简单显示时间。显示格式&#xff1a;88-88-88&#xff08;时-分-秒&#xff09; 4、功能2&#xff1a;&#xff08;1&#…

移植 AWTK 到 纯血鸿蒙 (HarmonyOS NEXT) 系统 (9) - 编译现有的AWTK应用程序

AWTK 应用程序开发完成后&#xff0c;在配置文件中添加 harmonyos 的选项&#xff0c;通过create_project.py脚本即可生成 DevEco Studio的工程。 安装开发环境 DevEco Studio HarmonyOS 的开发工具。 Python 运行环境。 git 源码管理工具。 下载 awtk 和 awtk-harmonyos…

江苏博才众创科技产业园集团拟投资10亿元在泰兴打造汽车零部件产业园

2024年11月7日&#xff0c;泰兴市高新技术产业开发区与江苏博才众创科技产业园集团举行新能源汽车零部件智能制造产业园项目签约仪式。 泰兴市高新区党工委委员、管理办副主任王峰表示&#xff1a;高新区是全市项目建设的主阵地&#xff0c;近年来聚焦高端化、智能化、绿色化&a…

计算机毕业设计项目推荐,应届毕业生求职网站 80757 上万套实战教程手把手教学JAVA、PHP,node.js,C++、python、大屏

摘要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对应届毕业生求职网站管理等问题&#xff0c;…

OceanBase详解及如何通过MySQL的lib库进行连接

OceanBase详解及如何通过MySQL的lib库进行连接 一、引言二、OceanBase概述1. 起源与发展2. 核心技术特点3. 应用场景三、OceanBase架构解析1. 系统架构2. 存储引擎3. 分布式架构四、如何使用MySQL的lib库连接OceanBase1. 前提条件2. 安装MySQL Connector/C3. 编写连接代码4. 编…

Trimble X12三维激光扫描仪正在改变游戏规则【上海沪敖3D】

Trimble X12 三维激光扫描仪凭借清晰、纯净的点云数据和亚毫米级的精度正在改变游戏规则。今天的案例我们将与您分享&#xff0c;X12是如何帮助专业测量咨询公司OR3D完成的一个模拟受损平转桥运动的项目。 由于习惯于以微米为单位工作&#xff0c;专业测量机构OR3D是一家要求…

UniTask/Unity的PlayerLoopTiming触发顺序

开始尝试在项目中使用UniTask&#xff0c;发现其中的UniTask.Yield确实很好用&#xff0c;还可以传入PlayerLoopTiming来更细致的调整代码时机&#xff0c;不过平常在Mono中接触的只有Awake&#xff0c;Start&#xff0c;Update等常用Timing&#xff0c;其他的就没怎么接触了&a…

分类 classificaton

1&#xff09;什么是分类&#xff1f; 在此之前&#xff0c;我们一直使用的都是回归任务进行学习&#xff1b;这里我们将进一步学习什么是分类&#xff0c;我们先从训练模型的角度来看看二者的区别。 对于回归来说&#xff0c;它所作的是对模型输入相应的特征&#xff0c;然后…

Maven学习——创建Maven的Java和Web工程,并运行在Tomcat上

一、Maven介绍 Maven 是一款为 Java 项目管理构建、依赖管理的工具&#xff08;软件&#xff09;&#xff0c;使用 Maven 可以自动化构建、测试、打包和发布项目&#xff0c;大大提高了开发效率和质量。 二、Maven安装步骤 1.下载后解压到没有空格、特殊字符和中文的目录中 2…

数据血缘追踪是如何在ETL过程中发挥作用?

在大数据环境下&#xff0c;数据血缘追踪具有重要意义&#xff0c;它能够帮助用户了解数据的派生关系、变换过程和使用情况&#xff0c;进而提高数据的可信度和可操作性。通过数据血缘追踪&#xff0c;ETL用户可以准确追溯数据的来源&#xff0c;快速排查数据异常和问题。 一、…

在服务器里安装2个conda

1、安装新的conda 下载地址&#xff1a;Index of /anaconda/archive/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 本文选择&#xff1a;Anaconda3-2023.03-1-Linux-x86_64.sh 安装&#xff1a;Ubuntu安装Anaconda详细步骤&#xff08;Ubuntu22.04.1&#xff…

OceanBase中,如何解读 obdiag 收集的火焰图 【DBA早下班系列】

1. 前言 在之前的文章 遇到性能问题&#xff0c;如何给OceanBase“拍CT“&#xff08;火焰图与扁鹊图&#xff09;中&#xff0c;分享了obdiag 快速收集火焰图的方法&#xff0c;那么&#xff0c;紧接着的问题便是&#xff1a;收集到火焰图和扁鹊图之后&#xff0c;该如何解读…

【数据库实验一】数据库及数据库中表的建立实验

目录 实验1 学习RDBMS的使用和创建数据库 一、 实验目的 二、实验内容 三、实验环境 四、实验前准备 五、实验步骤 六、实验结果 七、评价分析及心得体会 实验2 定义表和数据库完整性 一、 实验目的 二、实验内容 三、实验环境 四、实验前准备 五、实验步骤 六…

基于YOLO11/v10/v8/v5深度学习的煤矿传送带异物检测系统设计与实现【python源码+Pyqt5界面+数据集+训练代码】

《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…