Отправить несколько параметров, когда Axios загрузить изображение

Question

Я загружаю изображения с formdata и axios.Я использую Symfony для моего бэкенда, и мне нужно получить доступ к файлу изображения и другим параметрам.Это мой код аксиоса.

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());
}

К сожалению, я получаю нулевое значение в качестве вывода.Я получаю формданные из загруженного изображения, и это объект формданных.Это работает, если я делаю это, но мне нужны оба параметра.

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

, но мне нужно отправить и другой параметр.

Answer 1

На стороне Symfony вы должны использовать форму, чтобы вы могли получать много типов данных.См. Документацию здесь: https://symfony.com/doc/current/forms.html

На стороне vuejs / axios вы просто не можете одновременно отправлять контент json и формировать контент данных (так как это 2 разных типа данных).Но вы можете добавить некоторый контент к данным вашей формы (так же, как вы можете иметь файл с другими полями в вашей форме Symfony).

Answer 2

Вы не можете смешивать FormData с JSON. Это связанный вопрос

Отправить объект FormData И дополнительный параметр через ajax

Если у вас есть только один параметр - ad = 12, я рекомендую использовать код:

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