ajax异步请求图片blob转base64并显示出来

最新推荐文章于 2022-11-07 14:40:24 发布

走_开

最新推荐文章于 2022-11-07 14:40:24 发布

阅读量1k

点赞数

分类专栏： web前端文章标签： vue.js

原文链接：https://www.jianshu.com/p/cc9d2a1bd833

版权

web前端专栏收录该内容

63 篇文章 0 订阅

订阅专栏

转载：https://www.jianshu.com/p/cc9d2a1bd833

 methods: {

        tapCaptcha(){
            var that=this;
            Request.get('captcha', {
                responseType: 'blob',
            }).then(res => {
                var a = new FileReader();
                a.onload = function (e) { 
                    that.captcha=e.target.result;
                 }
                a.readAsDataURL(res.data);


            })

        },

或者

var that =this;
      Request.get('captcha', {
                      responseType: 'blob',
                  }).then(res => {
                     that.captcha= window.URL.createObjectURL(res.data)
                      console.log(res)
})

下载

axios：设置返回数据格式为blob或者arraybuffer
如：
    var instance = axios.creat({         ... //一些配置
        responseType: 'blob', //返回数据的格式，可选值为arraybuffer,blob,document,json,text,stream，默认值为json
    })
请求时的处理：
　　getExcel().then(res => {
    　　//这里res.data是返回的blob对象     
    　　var blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'}); //application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
    　　var downloadElement = document.createElement('a');
    　　var href = window.URL.createObjectURL(blob); //创建下载的链接
    　　downloadElement.href = href;
    　　downloadElement.download = 'xxx.xlsx'; //下载后文件名
    　　document.body.appendChild(downloadElement);
    　　downloadElement.click(); //点击下载
    　　document.body.removeChild(downloadElement); //下载完成移除元素
    　　window.URL.revokeObjectURL(href); //释放掉blob对象 
　})

使用axios post下载excel

axios.post(`${base}/auth/export`, params, {
    responseType: 'blob'
  }).then(res => {
    if (res.data) {
      if ('msSaveBlob' in navigator) { // 对IE和Edge的兼容
        window.navigator.msSaveBlob(res.data, decodeURI(res.headers['content-disposition'].split('filename=')[1]))
      } else {
        let blob = res.data
        let a = document.getElementById('exportLog')
        let url = window.URL.createObjectURL(blob)
        let filename = decodeURI(res.headers['content-disposition'].split('filename=')[1])
        var evt = document.createEvent('HTMLEvents') // 对firefox的兼容
        evt.initEvent('click', false, false) // 对firefox的兼容
        a.href = url
        a.download = filename
        a.dispatchEvent(evt) // 对firefox的兼容
        a.click()
        window.URL.revokeObjectURL(url)
      }
    }
  })

创建请求拦截器（POST请求配合QS）

// http request 拦截器
axios.interceptors.request.use(config => {
  if (config.method === 'post') {
    config.data = qs.stringify(config.data, {arrayFormat: 'brackets'})
  }
  return config
})

作者：逸宸a
链接：https://www.jianshu.com/p/cc9d2a1bd833
来源：简书