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

• vue 将后端返回的文件地点下载到当地
  

• 在 template 拿到后端返回的文件路径
  

1. <el-button link type="success" icon="Download" @click="handleDownload(file)"> 附件下载 </el-button>

复制代码

• 在 script 内里写方法
  

1. function handleDownload(val) {
2.   const url = import.meta.env.VITE_APP_BASE_API + val  // 本地地址加文件路径
3.   const link = document.createElement('a')
4.   link.href = url
5.   link.setAttribute('download', `附件_${new Date().getTime()}`)
6.   document.body.appendChild(link)
7.   link.click()
8.   document.body.removeChild(link)
9. }

复制代码

• uniapp 将后端返回的文件地点下载到当地
  

• 在 template 拿到后端返回的文件路径
  

1. <uni-forms-item label="文件:" name="excelFilePathView">
2.         <uni-file-picker fileMediatype="all" v-model="form.excelFilePathView" @select="selectFilePath" />
3.         <view v-for="(file,index) in form.excelFilePathView" :key="index">
4.                 <a style="color:#00aaff" :href="file.url" target="_blank"> 查看 {{ index+1 }}</a>
5.         </view>
6. </uni-forms-item>

复制代码

• 在 script 内里写方法
  

1. selectFilePath(e) {
2.         const tempFilePaths = e.tempFilePaths
3.         const imgUrl = tempFilePaths[0]
4.         uni.uploadFile({
5.                 url: config.baseUrl + "/common/upload",
6.                 filePath: imgUrl,
7.                 name: 'file',
8.                 header: {
9.                         "Authorization": 'Bearer ' + getToken()
10.                 },
11.                 success: (uploadFileRes) => {
12.                         let path = JSON.parse(uploadFileRes.data)
13.                         this.form.excelFilePathView.push({
14.                                 name: path.fileName,
15.                                 url: path.fileName
16.                         })
17.                 }
18.         })
19. },

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金