• 我的开发情景是：点击下载-----向后台发出请求-----后台返回图片的文件流
• 开发目标是：点击下载-----即可下载图片

我的代码：

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 请求后台接口的两种方式：

1. 使用别名进行请求（ axios.get 或者 axios.post等）

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

2. 通过向 axios 传递相关配置来创建请求

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  responseType: 'blob',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

了解更多axios：https://www.kancloud.cn/yunye/axios/234845