我的开发情景是：点击下载-----向后台发出请求-----后台返回图片的文件流开发目标是：点击下载-----即可下载图片
我的代码：
axios({
method: 'post',
url: 'UCConfig/QRcode',
data: {
channel_user_id: row.channel_user_id,
},
responseType: 'blob'
}).then(res => {
const blob = new Blob([res.data])
const fileName = 'qudaoerweima.jpg'
const dlink = document.createElement('a')
if ('download' in document.createElement('a')) { // 非IE下载
const dlink = document.createElement('a')
dlink.download = fileName
dlink.style.display = 'none'
dlink.href = URL.createObjectURL(blob)
document.body.appendChild(dlink)
dlink.click()
URL.revokeObjectURL(dlink.href) // 释放URL 对象
document.body.removeChild(dlink)
} else { // IE10+下载
navigator.msSaveBlob(blob, fileName)
}
});
提醒和解释：
responseType: 'blob' 是设置返回值为blob类型。res.data 指后台返回图片的文件流const fileName = 'qudaoerweima.jpg' 改变后缀名等于改变下载文件的后缀名，即把.jpg换成.png那么下载的就是 .png 类型的图片，换成 .pdf ，下载的就是 pdf 文件。由此可以推断出，此种方法亦适合下载 pdf 等其它文件流。dlink 是模拟a标签点击下载用的。百度时发现其他人有出现因为 mock.js 而不能正常下载的情况----- mockjs 初始化的时候给拦截响应设置了 responseType:'' ，所以可以尝试下屏蔽掉 mockjs 。找到这行代码 require('@/mock') 并注释，重启项目再进行测试。
mock模块会影响原生的ajax请求，使得服务器返回的blob类型变成乱码
额外扩展下vue使用 axios 请求后台接口的两种方式：
使用别名进行请求（ axios.get 或者 axios.post等）
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
通过向 axios 传递相关配置来创建请求
// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
responseType: 'blob',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
了解更多axios：https://www.kancloud.cn/yunye/axios/234845