记录公司项目回显二维码,这里只是浏览器展示,小程序可以考虑使用base64加密。
1.后端接口
@RequestMapping("/viewPic")
public void viewPic(HttpServletResponse response) throws Exception{
File file = new File("d:"+ File.separator+"code"+ File.separator + "nowait.jpg");
if (file.exists()){
FileInputStream is = new FileInputStream(file);
int i = is.available(); // 得到文件大小
byte data[] = new byte[i];
is.read(data); // 读数据
is.close();
response.setContentType("image/*"); // 设置返回的文件类型
OutputStream toClient = response.getOutputStream(); // 得到向客户端输出二进制数据的对象
toClient.write(data); // 输出数据
toClient.close();
}
}
2.前端请求
data(){
return{
captchaImg:""
};
},
getPic(){
request({
api: "BAPI",
url: "/qrcode/viewPic",
method: "get",
responseType: 'arraybuffer',//二进制响应类型
}).then(res=>{
console.log(res)
const blob = new Blob([res], {
type: 'application/png;charset=utf-8',
});
const url = window.URL.createObjectURL(blob);
this.captchaImg = url
}).catch(err => {
console.log(err);
});
}
3.前端展示
这里为了不让图片变形只设置了宽度
<img :src="captchaImg" alt="未上传二维码" width="250px" style="margin-left: 50%;margin-top: 100px">