有关后端返回文件流或base64文件，前端如何实现图片展示和下载 ...

后端返回的文件流，前端怎么把图片显示出来

 1.多年前端开发经验的我现在用的最多的是：直接将请求地址写在src里面，如：
<img src="/file/preview/picture.png" alt="图片">
 2.由于后台加上鉴权后，需要每个接口在header里面加上token,上面的做法就行不通了，需要发送请求获得文件流

1. const file_data = res.data // 后端返回的文件流
3. const blob = new Blob([file_data])
4. const url = window.URL.createObjectURL(blob) // image中src的链接

复制代码

3.后台返回base64文件

1. srcurl= 'data:application/octet-stream;base64,' + res

复制代码

js下载后端返回的文件

1.后端返回文件流形式，前端下载

1. // res 为后端返回的响应对象
3. const file_data = res.data // 后端返回的文件流
5. const blob = new Blob([file_data])
6. const url = window.URL.createObjectURL(blob) // 创建下载的链接
7. const file_name = decodeURI(res.headers['content-disposition'].replace('attachment;filename=', '')) // 需要后端暴露请求头'Content-Disposition'
8. console.log(file_name) // 从请求头获取文件名
9. const downloadElement = document.createElement('a')
10. downloadElement.style.display = 'none'
11. downloadElement.href = url
12. downloadElement.download = file_name // 下载后文件名
13. document.body.appendChild(downloadElement)
14. downloadElement.click()
15. document.body.removeChild(downloadElement) // 下载完成移除元素
16. window.URL.revokeObjectURL(url) // 释放掉blob对象
19. 注：如果下载文件变大打不开，可以设置 responseType: 'arraybuffer'
21. async reqestApi(param) {
22.     const res = await axios.get('exportExeclData', { params: param, responseType: 'arraybuffer' })   
23. }

复制代码

2.后端返回base64格式，前端下载

1. // res 后端返回的文件base64
3. const link = document.createElement('a')
4. link.href = 'data:application/octet-stream;base64,' + res
5. link.download = '下载的文件名'
6. link.click()

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。