vue项目后端接口返回文件流，接口报错时前端获取不到错误信息解决方法和文件流处理

项目是vue+axios+elementUI,以下载压缩包(.zip)为例子:

首先是html代码

<!--此为element UI 框架的按钮-->
<el-button type="primary" @click="exportFiles" size="mini" >导出案卷包</el-button>

其次是js代码

<script>
import { downloadCases } from '@/api/ipr/cases/baseInfo' // 接口
export default {
	methods: {
		exportFiles () { // 导出案卷包
			let params = {
			casesId: this.caseId,
			taskId: this.taskId	
			}
            downloadCases(params).then(
                res => {
                    let data = res.data
                    let _self = this
                    let fileReader = new FileReader();
                    fileReader.onload = function() {
                        try {
                            let jsonData = JSON.parse(this.result);  // 说明是普通对象数据，后台转换失败
                            if (jsonData.code === 400) { // 接口返回的错误信息
                           		 // alert(jsonData.msg)
                                _self.$alarm.showWarning(jsonData.msg) // 弹出的提示信息
                            }
                        } catch (err) {   // 解析成对象失败，说明是正常的文件流
                            const blob = new Blob([res.data], { type: 'application/zip' }) // 如类型为excel,type为：'application/vnd.ms-excel'
                            const fileName = res.headers.filename
                            const url = window.URL.createObjectURL(blob)
                            const link = document.createElement('a')
                            link.style.display = 'none'
                            link.href = url
                            link.setAttribute('download', fileName)

                            document.body.appendChild(link)
                            link.click()
                            document.body.removeChild(link) // 点击后移除，防止生成很多个隐藏a标签
                        } 
                    };
                    fileReader.readAsText(data)  // 注意别落掉此代码，可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式)
                }
            ).catch(err => {
                console.log(err)
            })
        },
	}
}
</script>

最后是api/ipr/cases/baseInfo中的接口api

/** 导出案卷包 */
export function downloadCases (data) {
    return request({
        url: '/kfcloud-ipr/cases/downloadCasesZip', // 后端对应的url
        method: 'post', // 接口请求方式
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
        },
        responseType: 'blob', // 文件流格式
        params: data // 参数
    })
}