Vue中使用axios下载流图片并显示

使用axios下载流验证码的图片，并显示。

其中使用responseType为blob，具体参考我的博文：
下载文件，跨域获取Response Headers中响应头，以及IE无法下载文件

只不过这里是使用saveAs进行下载文件，而这里就需要去获取URL然后显示
所以改造（其中fetch是axios的封装）

Vue.prototype.$downloadFileAxios = function (url) {
      return new Promise((resolve, reject) => {
        fetch({
          url: url,
          method: 'get',
          responseType: 'blob'
        }).then(response => {
          const content = response.data;
          resolve(window.URL.createObjectURL(content))
        }).catch(error => {
          reject(error)
        })
      })
    }

使用：

this.$downloadFileAxios("xxx")
	.then(res=>{
	console.log(res)//res就是url地址，直接赋给src即可
})

咻咻~~~

最后

以上就是任性戒指为你收集整理的Vue中使用axios下载流图片并显示的全部内容，希望文章能够帮你解决Vue中使用axios下载流图片并显示所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。