vue解析后端返回的二进制图片
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.效果如下:
文章图片
// 经过一顿操作之后,后端返回的图片正常展示了
【vue解析后端返回的二进制图片】7.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 2020-04-07vue中Axios的封装和API接口的管理
- django-前后端交互
- VueX--VUE核心插件
- Quartz|Quartz 源码解析(四) —— QuartzScheduler和Listener事件监听
- Java内存泄漏分析系列之二(jstack生成的Thread|Java内存泄漏分析系列之二:jstack生成的Thread Dump日志结构解析)
- [源码解析]|[源码解析] NVIDIA HugeCTR,GPU版本参数服务器---(3)
- Android系统启动之init.rc文件解析过程
- vue组件中为何data必须是一个函数()