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

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

/**
     * 获取文件的流
     */@GetMapping("/getFileByUrl")@ApiOperationSupport(order =7)@ApiOperation(value ="逻辑删除", notes ="传入ids")publicvoidgetFileByUrl(@ApiParam(value ="主键集合", required =true)@RequestParamString url,HttpServletResponse response)throwsException{byte[] buffer =newbyte[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 =newFileInputStream(file);
            bis =newBufferedInputStream(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形式接收（必须添加）。

exportconstgetFileByUrl=(url)=>{returnrequest({url:'/api/comprehensiveSearchLog/getFileByUrl',method:'get',responseType:'blob',params:{url}})}

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

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

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

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

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