通过post请求下载接口,接口返回流数据,前端处理下载或展示出错信息

89 篇文章 7 订阅
8 篇文章 0 订阅

需求描述:
1、使用post请求,参数放在请求体内。所以不能用get请求。
2、后端返回流(二进制数据),前端自己处理下载
3、如果后端出错,后端返回json数据,前端处理,展示错误内容。

实现:
1、后端需要设置 response[‘Content-Type’] = ‘application/octet-stream’ 。
后端需要设置Content-Type 'application/octet-stream'

2、前端设置请求的 responseType: 'blob'

// function downloadMarkResult
request({
    url: '/api/img_mark_task/download/',
    method: 'post',
    responseType: 'blob',
    data
  })

3、前端处理下载内容:

api
        .downloadMarkResult({ task_id: v.id })
        .then(res => {
          // console.log('res111111', res)
          const data = res.data || res
          if (data.type === 'application/json') {
          # 通过相应type来判断是json还是流数据
            const reader = new FileReader()
            reader.readAsText(res, 'utf-8')
            reader.onload = e => {
              const readerres = reader.result
              let parseObj = {}
              parseObj = JSON.parse(readerres)
              this.$message.error(parseObj.msg || '操作失败')
            }
            return
          }
          const fileName = `标注结果.zip`
          
          const blob = new Blob([data], { type: 'application/zip' })
          if ('download' in document.createElement('a')) {
            // 非id
            const link = document.createElement('a')
            const blobUrl = URL.createObjectURL(blob)
            link.href = blobUrl

            link.download = fileName
            link.click()
            window.URL.revokeObjectURL(link.href)
          } else {
            // IE10+
            navigator.msSaveBlob(blob, fileName)
          }
        })
        .catch(err => {
          console.log(err)
        })

要点:
使用new FileReader()来将json的二进制数据转换为json格式的数据。

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值