利用axios的post方式实现文件的下载

最新推荐文章于 2024-05-05 21:34:51 发布

原创最新推荐文章于 2024-05-05 21:34:51 发布 · 651 阅读

2 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何在前端使用axios发起post请求下载文件，并通过responseType设置为arraybuffer接收文件流。后端则负责返回文件流，实现文件的无缝下载。代码示例清晰，涵盖了前端请求及下载逻辑。

1、前端代码：

dowloadTest(){
  this.$axios.request({
    method:'post',
    url:'/file/download',
    data:{
      fileid:123
    },
    responseType:'arraybuffer'
  })
    .then((response)=>{
      this.download(response.data);
    })
},
 download (data) {
   if (!data) {
       return
   }
   let url = window.URL.createObjectURL(new Blob([data]))
   let link = document.createElement('a')
   link.style.display = 'none'
   link.href = url
   link.download = 'ea7c0cf24153e0cd62bc8b64841fd84d.jpg'; //下载后文件名
   link.setAttribute('download', 'ea7c0cf24153e0cd62bc8b64841fd84d.jpg')
   document.body.appendChild(link)
   link.click()
}