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

  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
			})
		}
	})
},
相关推荐
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
落魄小二1 小时前
el-table 表格索引不展示问题
javascript·vue.js·elementui
neter.asia2 小时前
vue中如何关闭eslint检测?
前端·javascript·vue.js
光影少年2 小时前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
熊的猫3 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
mosen8684 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
别拿曾经看以后~5 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
Gavin_9155 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
Devil枫11 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试