后端如何返回一个(图片)文件流,并在前端vue展示。
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/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));
}
};
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)