elementui中展示后台传回来的多个图片流
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编码