How Do I Upload Image In Vuejs?

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. I have tried to

Solution 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:

<input type="file" accept="image/*" @change="uploadImage($event)"id="file-input">

Then add a method like this:

methods: {

  uploadImage(event) {

    constURL = 'http://foobar.com/upload'; 

    let data = newFormData();
    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)
      }
    )
  }
}

Solution 2:

I think in your case you are looking for a solution like this

example: uploading a image and previewing it before submission

<template><div><imgsrc:"previewImage" class="uploading-image" /><inputtype="file"accept="image/jpeg" @change=uploadImage></div></template><script>exportdefault {
        name:'imageUpload',
        data(){
            return{
               previewImage:null
            }
        },
        methods:{
            uploadImage(e){
                const image = e.target.files[0];
                const reader = newFileReader();
                reader.readAsDataURL(image);
                reader.onload = e =>{
                    this.previewImage = e.target.result;
                    console.log(this.previewImage);
                };
            }
        }
     }  // missing closure added</script><style>.uploading-image{
     display:flex;
   }
 </style>

Solution 3:

If you want to upload an image and preview it before submission you can use simple and functional way as optionally.

<template><inputtype="file"accept="image/*" @change="onChange" /><divid="preview"><imgv-if="item.imageUrl":src="item.imageUrl" /></div></template><script>exportdefault {
  name: 'imageUpload',
  data() {
    return {
      item:{
          //...
          image : nullimageUrl: null
      }
    }
  },
  methods: {
    onChange(e) {
      const file = e.target.files[0]
      this.image = file
      this.item.imageUrl = URL.createObjectURL(file)
    }
  }
} 
</script>

Solution 4:

I'm taking from a few other peoples answers to sum it up.

this.image is base64 encoded and ready to send to your API.

<template><v-file-inputv-model="file"chipsaccept="image/*"label="Image"
       @change="onFileChange"
    /></template><script>exportdefault {
    data: { file: null, image: null },
    methods: {
        onFileChange() {
            const reader = newFileReader()
            reader.readAsDataURL(this.file)
            reader.onload = e => {
                this.image = e.target.resultconsole.log(this.image)
            }
        },
    },
}
</script>