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编码
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构