Vue 读取后台二进制文件流转为图片显示
Vue 读取后台二进制文件流转为图片显示
有一个项目需要从后台读取文件流转为图片显示到页面上,传回的文件是blob文件格式的,其实很简单,稍作记录。
http 请求是这个样子的。
image/jpeg 格式的。
js代码
this.$http({
url: '请求的接口',
method: 'get', // get请求,post改为post
responseType: 'blob',
params: { // 这是提交的参数,如果是post 的就是 data
id: '123456',
index: 'img'
}
}).then(({ data }) => {
let blob = new Blob([data]); // 返回的文件流数据
let url = window.URL.createObjectURL(blob); // 将他转化为路径
this.mapSrc = url // 将转换出来的路径赋值给变量,其实和上一步结合就可以
}
})
到这里就拿到了blob流转换成的文件路径
html代码
然后就简单了,把这个转换出来的路劲赋值到需要展示的 img标签就可以了。
<img :src="mapSrc" alt="" style="width: 100%;">
这样子图片就显示出来了。
然后每次请求返回的图片流是一样的,同一张图片,但是转换出来的路径可能是不一样的,但是只要请求的是同一张图片的话,渲染出来的图片是一样的。就这样。
【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】叫我+V : http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V : https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V :https://gitee.com/wjw1014
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】叫我+V : http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V : https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V :https://gitee.com/wjw1014