后端如何返回一个（图片）文件流，并在前端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，首先在你的axios接口上添加 responseType:'blob' ，以表示你将以blob形式接收（必须添加）。

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

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

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

此时打印该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));  }};

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-03-26/149160.html，文章来源：网络cs，作者：康由，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！