一、效果图
![【vue3+vant4】移动端如何优雅地通过二进制流展示并预览图片_文件流](//dev-img.mos.moduyun.com/20231028/5ae83c78-affb-4d86-9f92-f6c61541ca2d.png)
![【vue3+vant4】移动端如何优雅地通过二进制流展示并预览图片_文件流_02](//dev-img.mos.moduyun.com/20231028/f61a3dc6-c5aa-4bff-84a6-b55954e5eab3.png)
二、数据结构
![【vue3+vant4】移动端如何优雅地通过二进制流展示并预览图片_ide_03](//dev-img.mos.moduyun.com/20231028/612eff3c-0e33-4502-8958-419024b001fe.png)
三、完整代码
1、前端代码
<van-image v-for="img in scanImgList" width="1rem" height="1rem" fit="cover" :src="img" @click="showScanImage" />
queryScanImageBlobList(scanImage) {
const config = {
headers: { 'Content-Type': "application/json; charset=utf-8" },
responseType: 'blob'
};
let that = this;
api.post('file/previewImage', scanImage, config).then(res => {
const dataInfo = res.data;
let reader = new window.FileReader();
reader.readAsArrayBuffer(dataInfo);
reader.onload = function (e) {
const result = e.target.result;
const contentType = dataInfo.type;
// 生成blob图片,需要参数(字节数组, 文件类型)
const blob = new Blob([result], { type: contentType });
// 使用Blob创建一个指向类型化数组的URL, URL.createObjectURL是new Blob文件的方法,可以生成一个普通的url,可以直接使用,比如用在img.src上
const url = window.URL.createObjectURL(blob);
that.scanImgList.push(url);
}
}).catch(error => {
console.log(error)
})
}
2、后端代码
@Override
public ResultVo previewImage(ApproveFileBean scanImg, HttpServletRequest request, HttpServletResponse response) {
try {
FileUtil.getFileBlob(scanImg, response);
} catch (Exception e) {
throw new BadRequestException(e.getMessage());
}
return ResultVo.success("success");
}
/**
* 通过url获取文件流返回浏览器
*/
public static void getFileBlob(ApproveFileBean file, HttpServletResponse response) throws Exception {
ZipUtil.setResponse(file.getFileName(), response);
try {
OutputStream os = response.getOutputStream();
InputStream is = FileUtil.getInputStreamByUrl(AuthConstant.FILE_BASE_PATH + file.getFilePath());
if (is != null) {
int len;
byte[] buff = new byte[1024];
while (-1 != (len = is.read(buff, 0, buff.length))) {
os.write(buff, 0, len);
}
is.close();
os.close();
}
} catch (Exception e) {
e.printStackTrace();
throw new BadRequestException("获取文件流异常: " + e.getMessage());
}
log.info("<== 获取文件流结束:" + file.getFileName());
}
/**
* 通过url获取输入流
*/
public static InputStream getInputStreamByUrl(String strUrl) {
HttpURLConnection conn = null;
try {
URL url = new URL(strUrl);
conn = (HttpURLConnection) url.openConnection();
conn.setRequestMethod("GET");
conn.setConnectTimeout(60 * 1000);
final ByteArrayOutputStream output = new ByteArrayOutputStream();
IOUtils.copy(conn.getInputStream(), output);
return new ByteArrayInputStream(output.toByteArray());
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
if (conn != null) {
conn.disconnect();
}
} catch (Exception e) {
e.printStackTrace();
}
}
return null;
}