[Vuejs]-How to send file from VueJS to API/ExpressJS using axios

by

0👍

You have to use formData when submitting files to axios, otherwise, your files won’t be available on server-side.

This is a simple method that performs an upload of a file. Please note: if you want to send additional data within your request, you have to add as many formData.append() as you have properties.

uploadAvatar () {
    const formData = new FormData()

    formData.append('avatar', this.file)
    formData.append('other_field', this.otherField)

    axios.post('/avatars/upload', formData)
        .then((response) => {
            console.log(response.data)
        })
        .catch((e) => {
            console.log(e)
        })
}

From my experience, if you have a huge form and you want to avoid many formData.append(), the best option is to handle your uploads separately.

Leave a comment