后端输出二维码图片流,VUE前端展示

后端输出二维码图片流,VUE前端展示


后端输出二维码图片流,VUE前端展示_第1张图片

 responseType: 'blob',  // 首先在axios中使用blob

在 ajax 请求中,指定 responseType 属性为 blob ,可以下下载一个 Blob 对象。

浏览器允许使用 URL.createObjectURL() 方法,针对 Blob 对象生成一个临时URL,作为图片预览的 URL。

代码示例:

//绑定至img
<el-image :src="imgSrc">el-image>
 this.$axios.request({
          url: '/xxxxxxx/xxx',
          responseType: 'blob',
          method: 'get',
          params: {id: this.$route.query.id}
        }).then(res => {
          let blob = new Blob([res], { type: "text/html" });
          let url = window.URL.createObjectURL(blob);
          this.imgSrc = url;
        }), (error) => {
          this.$message({
            type: 'warning',
            message: '系统错误,请联系管理员!'
          });
        }

你可能感兴趣的:(javascript,vue,js,前端,vue.js,javascript)