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