Vuex+Laravel：无法将带有 FormData 和 axios 的多个文件发送到服务器端。在服务器端始终为空。这是怎么回事？

Posted 2023-02-22

【中文标题】Vuex+Laravel：无法将带有 FormData 和 axios 的多个文件发送到服务器端。在服务器端始终为空。这是怎么回事？

【英文标题】：Vuex+Laravel: Can't send multiple files with FormData and axios to server side. Always getting null on server side. What's going on?

【发布时间】：2022-01-10 05:18:10

【问题描述】：

我上一个问题Vuex + Laravel. Why axios sends any values but only not that one, which come's with method's parameter?得到的信息 仅适用于我在 axios 中仅传递一个参数的情况。我还发现了如何使用一个参数成功传递多个文件，但在我的情况下，我必须使用对象才能传递多个参数。所以不是

const response = await axios.post('/posts', data)

我必须使用下一个

const response = await axios.post('/posts', 
                formData:data,
                body:postBody
            )

我认为这很容易，但现在是我找不到解决方案的第 5 个小时。

控制器

public function store(Request $request)
    
        $files = $request->all();
        return var_dump($files);
    

我尝试了很多东西，包括 $request->allFiles() 和 getClientOriginalExtension() 实验。没有结果。 你有什么版本？如何解决这个问题？

重要！ 我使用 Laravel、vuex、axios。 我使用不在 FormData 中的文本，因为它是 textArea。如果我可以结合 FormData 中的 textarea 来进行一个参数 axios 调用，那么知道我上面描述的问题是什么对我来说仍然非常重要。

更新

这是 chrome 的有效负载标签

【问题讨论】：

您是否完全确定文件已发送到端点？你能从 chrome 的开发控制台分享你的请求负载吗？

@Luciano 没有。这很奇怪。没有对象方法作为单个参数，一切正常，但作为对象 - 没有。我更新了问题。你可以看你想要的截图。

为什么不直接发送 formData 对象中的所有内容？为什么要发送 formData 和数据？

@Luciano 如我所见，仅使用一个 FormData 发送所有数据在逻辑上是不正确的。原因 formData 表示数据，属于表单上下文。 Textarea 也许我们可以把它当作表单数据，但是如果我也想发送另一个数据呢？

嗯，简短的回答是“你不能”。就“逻辑正确”而言，您为什么要发送 post 有效载荷，其中包含一些不考虑后操作本身的数据？

【参考方案1】：

目前还不清楚为什么您不在formData 对象中发送您需要的所有内容。

你可以这样做：

const formData = new FormData()

formData.append(body, postBody)
formData.append(files, fileList)
formData.append(otherData, someOtherData)

const response = await axios.post('/posts', formData)

然后在你的服务器端你就可以做

 $body = $request->body;
 $files = $request->files;
 $otherData = $request->otherData;

【讨论】：

这很有帮助，所以我将其标记为有用。