后端如何返回一个（图片）文件流，并在前端vue展示。

后端部分可分为三步：
1，获取文件参数（非必须，根据自己情况添加）
2，获取文件
3，以流形式返回
具体代码如下：

/** * 获取文件的流 */ @GetMapping("/getFileByUrl") @ApiOperationSupport(order = 7) @ApiOperation(value = "逻辑删除", notes = "传入ids") public void getFileByUrl(@ApiParam(value = "主键集合", required = true) @RequestParam String url,HttpServletResponse response) throws Exception { byte[] buffer = new byte[1024]; FileInputStream fis = null; BufferedInputStream bis = null; try { //获取部分参数，用于从minIO上将文件下载到tmp（此步骤不是必须） String[] split = url.split("\\."); String suffix = split[1]; Long userId = AuthUtil.getUser().getUserId(); String userName = AuthUtil.getUser().getUserName(); DownloadInvokePacket packet = InvokePacketUtil.getDownloadInvokePacketForRandomUrl("综合检索文件下载", String.valueOf(userId), userName, suffix, SystemEnum.MANAGE, SystemEnum.MINIO); //拿到这个文件 File file = MinioUtil.publishDownload(packet, url); response.setContentType("application/octet-stream"); response.setHeader("content-type", "application/octet-stream"); response.setHeader("Content-Disposition", "attachment;fileName=download" + DateUtil.time());// 设置文件名 //返回流处理 fis = new FileInputStream(file); bis = new BufferedInputStream(fis); OutputStream os = response.getOutputStream(); int i = bis.read(buffer); while (i != -1) { os.write(buffer, 0, i); i = bis.read(buffer); } }catch (Exception e) { }finally { if (bis != null) { try { bis.close(); } catch (IOException ignored) { } } if (fis != null) { try { fis.close(); } catch (IOException ignored) { } } } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49

前端展示部分。
1，首先在你的axios接口上添加 responseType:'blob' ，以表示你将以blob形式接收（必须添加）。

export const getFileByUrl = (url) => { return request({ url: '/api/comprehensiveSearchLog/getFileByUrl', method: 'get', responseType:'blob', params: {url} }) }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

2，拿到接口返回值后，将其转为blob形式

const blob = new Blob([result.data], { type: type }); console.log(blob); let src = window.URL.createObjectURL(blob); console.log(src);

• 1
• 2
• 3
• 4

此时打印该blob，会是下面这种样子：

接下来，你可以将拿到的src变量打印，是这种样子：

将这个src变量赋值到标签的src上，就可展示此图片了。

附：js下载工具方法

/** * 下载excel * @param {blob} fileArrayBuffer 文件流 * @param {String} filename 文件名称 */ export const downloadXls = (fileArrayBuffer, filename) => { let data = new Blob([fileArrayBuffer], { type: 'application/vnd.ms-excel,charset=utf-8' }); if (typeof window.chrome !== 'undefined') { // Chrome var link = document.createElement('a'); link.href = window.URL.createObjectURL(data); link.download = filename; link.click(); } else if (typeof window.navigator.msSaveBlob !== 'undefined') { // IE var blob = new Blob([data], { type: 'application/force-download' }); window.navigator.msSaveBlob(blob, filename); } else { // Firefox var file = new File([data], filename, { type: 'application/force-download' }); window.open(URL.createObjectURL(file)); } };

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23