1. 前端
如果返回一个图片的话就可以,直接返回,img标签可以直接解析,但是如果返回多个图片,就解析不成功,需要转成base64编码(可以在前台转,也可以在后台进行,此处在java代码转化),再进行src解析
<!--图片展示-->
<el-dialog
title="凭证图"
:visible.sync="dialogVisiblesImage"
width="50%">
<div
v-for="item in imgUrlMany"
:key="item.id">
<img
:src="item.url"
width="100%"
style="margin:0 auto">
</div>
</el-dialog>
data:数据
imgUrlMany: [],
dialogVisiblesImage: false,
方法:
// 返回结果是图片
detailImages(row.id).then(response => {
this.imgUrlMany = response.data.map(item => {
return {
url: item.body
}
})
this.dialogVisiblesImage = true
}).catch(error => {
this.$message.error(error.message)
})
2.java
public HttpResult<List<ResponseEntity<String>>> detailImages(@RequestBody String id) {
List<ResponseEntity<String>> responseEntities = groupPolicyRenewalService.detailImage(id);
return HttpResultUtil.success("查询成功",responseEntities);
}
@Override
public List<ResponseEntity<String>> detailImage(String groupId) {
List<ResponseEntity<String>> responseEntityList = new ArrayList<>();
//此处返回的是多个图片,此处只有一个,修改使用
File file = new File(path);
HttpHeaders headers = new HttpHeaders();
String fname = fileInfoDO.getFilename() + "." + fileInfoDO.getFiletype();
try {
headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
headers.set("fileName", URLEncoder.encode(fname, "utf-8"));
String result = "data:image/jpg;base64,"
+ new BASE64Encoder().encode(org.apache.commons.io.FileUtils.readFileToByteArray(file));
ResponseEntity<String> responseEntity = new ResponseEntity<>(result, headers, HttpStatus.OK);
responseEntityList.add(responseEntity);
} catch (IOException e) {
e.printStackTrace();
throw new RRException("文件加载失败!");
}
return responseEntityList;
}
// 主要代码
String result = "data:image/jpg;base64,"
+ new BASE64Encoder().encode(org.apache.commons.io.FileUtils.readFileToByteArray(file));
把图片的file转成base64编码