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编码
复制代码

 

posted @   这都没什么  阅读(2845)  评论(0编辑  收藏  举报
编辑推荐:
· 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语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示