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編碼