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

ゝ一纸荒年。 2023-10-08 21:31 28阅读 0赞

**后端部分可分为三步：**  
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，会是下面这种样子：  
![在插入图片描述][cfe0930a3f5145e28f98d3f5a12772ef.png]  
接下来，你可以将拿到的src变量打印，是这种样子：  
![在这里插入图片描述][c0c75ebec9fb4d578d6165b394e09dea.png]  
将这个src变量赋值到标签的src上，就可展示此图片了。

[cfe0930a3f5145e28f98d3f5a12772ef.png]: https://img-blog.csdnimg.cn/cfe0930a3f5145e28f98d3f5a12772ef.png
[c0c75ebec9fb4d578d6165b394e09dea.png]: https://img-blog.csdnimg.cn/c0c75ebec9fb4d578d6165b394e09dea.png