How do I upload image in vuejs?

Question

Please, below is my code in the script section of my vue component.

I\'m getting all the input fields right but the image and video uploads are showing empty values.

Answer 1

If you are using axios or fetch uploading files with vue is pretty easy.

This is a copy/pasta from my current project. I use axios to upload images:

First you'll need to have your input look like this:

Then add a method like this:

methods: {

  uploadImage(event) {

    const URL = 'http://foobar.com/upload'; 

    let data = new FormData();
    data.append('name', 'my-picture');
    data.append('file', event.target.files[0]); 

    let config = {
      header : {
        'Content-Type' : 'image/png'
      }
    }

    axios.put(
      URL, 
      data,
      config
    ).then(
      response => {
        console.log('image upload response > ', response)
      }
    )
  }
}