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

  1. vue 将后端返回的文件地址下载到本地
  • template 拿到后端返回的文件路径
javascript 复制代码
<el-button link type="success" icon="Download" @click="handleDownload(file)"> 附件下载 </el-button>
  • script 里面写方法
javascript 复制代码
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 拿到后端返回的文件路径
javascript 复制代码
<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 里面写方法
javascript 复制代码
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
			})
		}
	})
},
相关推荐
天天向上102417 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y33 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁40 分钟前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
写不出来就跑路1 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui
1undefined22 小时前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
paopaokaka_luck3 小时前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
用户3802258598243 小时前
vue3源码解析:依赖收集
前端·vue.js
wzyoung3 小时前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js
枣把儿5 小时前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
paopaokaka_luck5 小时前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序