axios上传图片时发送多个参数答案

【问题标题】：Send multiple parameters when axios upload imageaxios上传图片时发送多个参数
【发布时间】：2019-01-24 13:00:01
【问题描述】：

我正在使用 formdata 和 axios 上传图片。我在后端使用 symfony，我需要同时访问我的图像文件和其他参数。这是我的 axios 代码。

axios.post(testUp, { data: formData, ad: 12 }, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(response => {

                });

这是我的 symfony 代码。

/**
 * @Route("/test_up", name="test_up", methods={"GET","POST"})
 */
public function testUp(Request $request, CarRepository $carRepository) {
    dd($request->files->all());
}

不幸的是，我得到了 null 作为输出。我从上传的图像中获取表单数据，它是一个表单数据对象。如果我这样做但需要两个参数，它会起作用。

axios.post(testUp, formData, {
                 headers: {
                     'Content-Type': 'multipart/form-data'
                 }
             }).then(response => {
                 alert('*');
                 console.log(response);
             });

但我也需要发送其他参数。

【问题讨论】：

标签： symfony vuejs2 axios

【解决方案1】：

您不能将 FormData 与 JSON 混合使用。这是相关的问题

Send FormData object AND an additional parameter via ajax

如果你只有一个参数 - ad = 12 我建议使用代码：

axios.post(testUp + "?" + (new URLSearchParams({ad: 12})).toString()
, formData, {
                 headers: {
                     'Content-Type': 'multipart/form-data'
                 }
             }).then(response => {
                 alert('*');
                 console.log(response);
             });

【讨论】：

【解决方案2】：

在 Symfony 方面，您应该使用一个表单，以便您可以接收多种类型的数据。请参阅此处的文档：https://symfony.com/doc/current/forms.html

在 vuejs/axios 方面，您不能同时发送 json 内容和表单数据内容（因为它是 2 种不同类型的数据）。但是你可以在你的表单数据中添加一些内容（就像你可以在你的 Symfony 表单中拥有一个包含其他字段的文件一样）。

【讨论】：