后端部分可分為三步：
1，獲取文件參數(shù)（非必須，根據(jù)自己情況添加）
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 {
			//獲取部分參數(shù)，用于從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());// 設(shè)置文件名
			//返回流處理
			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，拿到接口返回值后，將其轉(zhuǎn)為blob形式

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

此時打印該blob，會是下面這種樣子：

接下來，你可以將拿到的src變量打印，是這種樣子：

將這個src變量賦值到標(biāo)簽的src上，就可展示此圖片了。

附：js下載工具方法文章來源地址http://www.zghlxwxcb.cn/news/detail-505529.html

/**
 * 下載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));
  }
};

到了這里，關(guān)于后端如何返回一個（圖片）文件流，并在前端vue展示。的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！