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

十一吖i2024-11-08 11:40

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)
}

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
			})
		}
	})
},