vue3:向后端上传图片,以及从后端文件流导出文件

297 阅读1分钟

从后端接口获取文件流导出文件

1.配置响应头responseType

在api/相应的接口文件下:
const getData = (data) => {
    return axios({
        url: "/zj/selectDataRecord",
        method: "post",
        data,
        'responseType':'blob'
    });
};

2.调接口处理文件流

const fn = async () => {
  const params = { id: '10000' }
  const res = await api.layout.getData(params) // 此处的res即为blob文件流

  const link = document.createElement('a')
  link.href = URL.createObjectURL(res)
  link.download = `文件名称`
  link.style.display = "none"
  document.body.appendChild(link)
  link.click()
  URL.revokeObjectURL(link)
}

3.可能出现的问题

// Failed to execute 'createObjectURL' on 'URL'
解决方法:
1.检查返回值res,res需要为blob文件流,不能为空,可能需要new Blob()
2.改为window.URL.createObjectURL

向后端上传图片文件

...