Javascript 如何在浏览器上下载文件

我正在做一个简单的项目，使用youtube dl从浏览器下载视频，用于研究porpuses

我想知道如何使用axios在浏览器上下载本地文件（mp4）。浏览器启动下载，但下载完成后，我无法打开mp4文件

这是我的代码段：

func download(w http.ResponseWriter, r *http.Request) {

    fileName := "video.mp4"

    data, err := ioutil.ReadFile(fileName)
    if err != nil {
        log.Print(err)
        return
    }

    w.Header().Set("Content-Type", "application/octet-stream")
    w.Header().Set("Content-Disposition", "attachment; filename="+fileName)
    w.Header().Set("Content-Transfer-Encoding", "binary")
    w.Header().Set("Expires", "0")
    http.ServeContent(w, r, fileName, time.Now(), bytes.NewReader(data))
}

这是我的JS函数，当用户输入文本时触发：

<script>
import axios from 'axios';

export default {
  name: 'govideo',

  data() { return {
    url: '',
  } },

  methods: {
    postreq() {
      axios.post("http://127.0.0.1:8090/download", {
        data: this.url,
        responseType: 'blob'
      }).then((response) => {
        var fileURL = window.URL.createObjectURL(new Blob([response.data]));
        var fileLink = document.createElement('a');

        fileLink.href = fileURL;
        fileLink.setAttribute('download', 'video.mp4');
        document.body.appendChild(fileLink);

        fileLink.click();
      })
    }
  }
}
</script>

从“axios”导入axios；
导出默认值{
名称：“govideo”，
data（）{return{
url:“”，
} },
方法：{
postreq（）{
axios.post（“http://127.0.0.1:8090/download", {
数据：this.url，
响应类型：“blob”
})。然后（（响应）=>{
var fileURL=window.URL.createObjectURL（新Blob（[response.data]）；
var fileLink=document.createElement（'a'）；
fileLink.href=fileURL；
setAttribute（'download'，'video.mp4'）；
document.body.appendChild（fileLink）；
fileLink.click（）；
})
}
}
}

视频文件没有问题，但从浏览器下载时无法打开

我正在尝试从我的post请求下载该文件，我是否应该为其执行单独的get请求

---

我的代码有问题，或者我遗漏了什么？

问题是在axios中处理响应的方法。我希望代码可以帮助您

validateGrpc() {
   
    axios.post("http://127.0.0.1:8090/download", {
    data: this.url,
    responseType: 'blob'
  })
          .then(response => {
            var blob = new Blob([response.data]);
            var downloadElement = document.createElement("a");
            var href = window.URL.createObjectURL(blob); //create the download url
            downloadElement.href = href;
            downloadElement.download = "test.mp4"; //the name of the downloaded file
            document.body.appendChild(downloadElement);
            downloadElement.click(); //click to file
            document.body.removeChild(downloadElement); //remove the element 
            window.URL.revokeObjectURL(href); //release the object  of the blob

            //    console.log(response);
          })
          .catch(response => {
            console.log(response);
          });
    }, 

如果使用“我的代码”下载该文件，您将从浏览器中看到该文件。

---

我在github上看到了你的代码。我想你应该把video.mp4放到

vue go-study\backend

目录中。然后一切都会好起来。

这可能不是你问题的原因，但是你是否将

postreq

包装在

方法中了，已经修好了。谢谢回答！不幸的是，它仍然不起作用。可能与CORS有关，或者我可以提供一些日志/信息来帮助您吗？您可以显示错误吗？我在本地计算机上运行得很好。当我试图打开下载的文件时，我的QuickTime（我在mac上，也尝试过VLC）说它无法打开“video.mp4”。直接通过浏览器上的后端路由下载，打开时不会出现任何问题。问题似乎是当我通过前端下载它时。你确认你从axios下载了该文件吗？我已经更新了我的answser。是的，我正在使用你的代码片段。如果你想仔细看看的话，我已经把代码上传到了。