关于vue.js:vue解析后端返回的二进制图片

49次阅读

共计 665 个字符,预计需要花费 2 分钟才能阅读完成。

1. 开发环境 vue
2. 电脑系统 windows10 专业版
3. 在开发的过程中, 咱们在数据交互的过程中, 后端返回的图片是一个二进制的模式, 前端 vue 怎么解析呢? 上面我来分享一下。
4. 废话不多说, 后端返回的二进制是乱码:

 很显著, 后端返回的是一个 二进制的模式, 那么咱们如何解析呢? 办法如下 

5.vue 解析后端返回二进制, 代码如下:

export const badlisttabledetailsfiles = (value) => {
    return http1({
        url: "/api/sys/image",
        method: "post",
        data: value,
        responseType: 'blob',  // 要害代码
    });
};  
badlisttabledetailsfiles({fileId: key,}).then((res) => {console.log("我是详情外面 files 接口");
    console.log(res);

    let reader = new FileReader(); // 要害代码
    reader.readAsDataURL(res);  // 要害代码
    console.log(res);
    this.filesimgs = window.URL.createObjectURL(res); // 要害代码
    console.log(this.filesimgs);
    this.filesimgsarr.push(this.filesimgs);
});

6. 成果如下:

// 通过一顿操作之后, 后端返回的图片失常展现了 

7. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。

正文完
 0