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

转载: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
来源:简书
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值