How can I post file and data together via Axios?

Question

I'm trying to post data (in a Vue application). There is also an image file input in the form. All tutorials and answers are just telling to send the file alone or with other files.[1][2]

What I want to do is to append the file to the existing object that I create with v-model bindings.

// Vue <template> <input name="title" type="text" v-model="newPost.title" /> <textarea name="content" v-model="newPost.content"></textarea> <input name="image" type="file" /> </template> <script> ... newPost: { title: null, image: null, content: null } ... addNewPost() { axios.post('/api/posts', this.newPost) } </script>

How should I do this?

Well, I validate form inputs in the newPost object on the server-side. Appending each input to a FormData variable (let's say newPostData) is breaking the form validation. FormData doesn't support appending objects AFAIK (see github.com/form-data/form-data/issues/92). — Melih
– Melih, Commented Apr 30, 2020 at 10:27

mai elrefaey · Accepted Answer · 2020-05-03 11:38:13Z

You can use Base64 encode in client side and add the encoded string to your post request and decode from server side: image here will be the encoded string an you can send axios request as you wrote.

Muhammet Başar · Accepted Answer · 2022-11-17 13:37:49Z

You cannot mount the selected file with v-model. Since the file is a constantly changing element, you should use the @change and ref attribute.

<input name="image" type="file" @change="selectedPostImage" ref="postImage"/>

The following operation is performed in the function that captures the selected file.

selectedPostImage(){ this.newPost.image= this.$refs.postImage.files[0] }

After these steps, you can send data with axios. Good codings..

Collectives™ on Stack Overflow

How can I post file and data together via Axios?

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related