Send multiple parameters when axios upload image

Question

I'm uploading images with formdata and axios. I'm using symfony for my back end and I need to access my image file and other parameter both. This is my axios code.

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

                });

And here is my symfony code.

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

Unfortunately I'm getting null as output. I'm getting the formdata from image uploaded and it's a formdata object. It works if I do this but need both parameters.

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

but I need to send other parameter too.

Daniel · Accepted Answer · 2019-01-24 13:36:58Z

2

You cant mix FormData with JSON. It is related question

Send FormData object AND an additional parameter via ajax

If you have only one parameter - ad = 12 I recommend to use code:

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

answered Jan 24, 2019 at 13:36

Daniel

8,7757 gold badges63 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nek · Accepted Answer · 2019-01-24 14:10:40Z

1

On Symfony side you should use a form so you can receive many type of data. See documentation here: https://symfony.com/doc/current/forms.html

On vuejs/axios side, you just cant send json content AND form data content at the same time (as it is 2 different type of data). But you can add some content to your form data (just like you can have a file with other fields in your Symfony form).

answered Jan 24, 2019 at 14:10

Nek

3,2431 gold badge23 silver badges37 bronze badges

Collectives™ on Stack Overflow

Send multiple parameters when axios upload image

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related