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

       一般来说我们会通过图片动态绑定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", // 指定响应类型为 Blobparams,});
}

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" />