前端文件下载（导出数据、图片验证码、出现乱码），通过后端接口获取到文件流，并在浏览器下载（显示）

1.文件流，对应的文件下载

axios请求时

因为后端接口返回的是文件流形式，所以在用axios进行请求时，要加上responseType: ‘blob’；如下：
post请求：

return axios.post(url, data, {responseType: 'blob'});

get请求:

return axios.get(url, {
        params: data,
        responseType: 'blob'
      });

请求成功后处理，并通过创建a标签进行下载

api.downTemplate().then(res => {
        console.log(res);
        if (res.status == 200) {
            this.$message.success('请求成功，正在导出');
            let blob = new Blob([res.data], {
              type: "application/vnd.ms-excel" 
            });
            let url = window.URL.createObjectURL(blob);
            let link = document.createElement("a");
            link.style.display = "none";
            link.download = "导入模板.xlsx"; // 可设置文件名
            link.href = url;
            document.body.appendChild(link);
            link.click();
          }
      });

2. 图片流，对应的图片显示（图片验证码）

axios请求时

同文件流处理方式相同，加上 responseType: ‘blob’

请求成功后处理

<img :src="imgUrl" alt="图片加载中...">

this.imgUrl = window.URL.createObjectURL(res.data);

图片验证码效果图