Question

我有一个 Vue.js 应用程序，它使用 axios 与 Laravel API 进行交互。我正在尝试使用其中的图像文件发出 POST 请求以上传到后端。我遇到的问题是 axios 使用空负载发出 POST 请求。我试过将它作为普通 JS 对象和 FormData 发送。在这两种情况下，请求负载都是空的。我已经在互联网上浏览了几个小时，但在过去几天试图解决这个问题时我找不到任何东西......

这就是我提出请求的方式：

let fd = new FormData();
fd.append('file', this.file);
console.log(...fd) //shows the file is there with its data
axios
    .post("/api/images", fd)
    .then(response => {
     //Handle success
    })
    .catch(errors => {
    //Catch errors
    });

这是我从表单中获取文件的方式：

let selectedImage = this.$refs.fileInput.files[0];
const reader = new FileReader();
reader.addEventListener('load', (event) => {
     this.file = event.target.result;
});
reader.readAsDataURL(selectedImage);

我尝试过使用请求标头，目前它们如下：

"Accept" : "application/json",
"Content-Type": "multipart/form-data; charset=utf-8; boundary=" + Math.random().toString().substr(2),
"Authorization": "Bearer " + this.user.api_token,
"X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content

来自 Laravel 的响应总是需要该文件（当它确实丢失时正如预期的那样）。我确实尝试在 Base64 中对文件进行编码，但无法验证它是否是后端中的图像。

我发现了这个类似的问题，但没有任何帮助：FormData sends empty data using axios

我想发送一个文件 + JSON 数据，但我可以让文件上传工作。所以... 如何使用 Axios 将文件从 Vue.js 应用程序发送到 Laravel API？我做错了什么？

JavaScript - Axios POST 请求空表单数据（请求负载）

0 个答案: