前端处理微信支付时后端返回乱码转二维码的解决方法

最近做到微信支付后端返给我一串乱码,打印出来是这样的效果,拿来给img标签使用肯定是不会生效的

但是在preview中是可以看到二维码的

这个需要在axios中进行一些操作,(我这个是vue项目)具体代码如下:

axios
        .get(base.baseUrl + base.payment, {
          params: {
            orderId: this.OrderId,
            goodBodyName: this.MyShopName,
          },
          responseType: "blob",
        })
        .then((res) => {
          console.log(res);
          if (res.status == 200) {
            const blob = new Blob([res.data]);
            this.newSrc = window.URL.createObjectURL(blob);
          }
        });

正常情况下,我们的responseType是json格式,在这里需要转化成blob格式,在拿到那些乱码后,转化成图片使用,转化图片代码

const blob = new Blob([res.data]);
this.newSrc = window.URL.createObjectURL(blob);

之后就可以在 页面中显示啦,效果图

responseType这块儿可能会出现一些问题,我这个项目本来是封装axios来用的,但是在响应拦截器添加老是加不进去,之后在这个页面引入了这种写法,可以使用了,具体axios参数的设置可以去看一下官方文档