前端拿到图片数据流无法显示问题

       一般来说我们会通过图片动态绑定url地址，去显示图片。前端在接收到后端返回的二进制数据量后会通过blob的形式去创建临时url显示图片。

后端部分代码

// 调用工具类返回二维码数据流
            BufferedImage codeStream = QRCodeUtil.createCodeToOutputStream(codeContent);
            ServletOutputStream outputStream = response.getOutputStream();
            ImageIO.write(codeStream, "png", outputStream);
            // 关闭资源
            outputStream.close();

            response.setContentType("image/png");
            response.setStatus(200);

*前端请求部分(这里必须加上 responseType: "blob")不然虽然前端可以拿到数据流，但是会无法显示。

import request from "@/utils/request";

export function getQRCode(params) {
  return request({
    url: "/QR-Code",
    method: "get",
    responseType: "blob", // 指定响应类型为 Blob
    params,
  });
}

vue.js

        getQRCode({ codeContent: this.codeContent }).then((res) => {
          var blob = new Blob([res.data]);

          this.qrCodeUrl = URL.createObjectURL(blob);
        });

   <el-image :src="qrCodeUrl" id="codeImg" v-if="qrCodeUrl" />

原文地址：https://blog.csdn.net/a983677218/article/details/140600851

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！