需求描述:
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格式的数据。