30

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 solve this issue but to no avail.

        playVideo(url) {
            let video = $('#video-preview').get(0);
            video.preload = 'metadata';
            // Load video in Safari / IE11
            if (url) {
                video.muted = false;
                video.playsInline = true;
                video.play();
            }
        },

        // Read a file input as a data URL.
        readDataUrl(input, callback) {
            if (input.files && input.files[0]) {
                let fileReader = new FileReader();
                fileReader.onload = function () {
                    callback(fileReader.result);
                };
                fileReader.readAsDataURL(input.files[0]);
            }
            else {
                callback(null);
            }
        },

        // Read a file input as an object url.
        readObjectUrl(input, callback) {
            if (input.files && input.files[0]) {
                let fileReader = new FileReader();
                fileReader.onload = function () {
                    let blob = new Blob([fileReader.result], {type: input.files[0].type});
                    let url = URL.createObjectURL(blob);
                    callback(url, blob);
                };
                fileReader.readAsArrayBuffer(input.files[0]);
            }
            else {
                callback(null);
            }

        },

    }

}

What exactly I want to achieve is upload image and video file, preview them before saving as blob.

the response

The above image shows my response @samayo

The image and video blob are showing empty values.

2
  • To which URL are you trying to upload? Is it put/post request?
    – samayo
    Dec 5, 2017 at 9:45
  • I'm using: submit() { let data = new FormData; data.append('description', this.description); data.append('displays', this.boards); data.append('messages', JSON.stringify(this.messages)); /*for(let property in this.messages) { data.append('messages', JSON.stringify(this.messages[property])); }*/ axios.post('/campaign', data).then(response => { this.feedback = response.data; }).catch(response.data); }
    – cjustinobi
    Dec 5, 2017 at 16:59

4 Answers 4

26

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

example: uploading a image and previewing it before submission

<template>
   <div>
      <img src:"previewImage" class="uploading-image" />
      <input type="file" accept="image/jpeg" @change=uploadImage>
   </div>
</template>

<script>
    export default {
        name:'imageUpload',
        data(){
            return{
               previewImage:null
            }
        },
        methods:{
            uploadImage(e){
                const image = e.target.files[0];
                const reader = new FileReader();
                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>
1
  • Note that this code doesn't UPLOAD anything anywhere, it just reads the file from drive and displays it in the browser.
    – Coreus
    Sep 23, 2021 at 10:15
22

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) {

    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)
      }
    )
  }
}
6
  • How can I upload video file, preview it and save it as blob. That is what I'm trying to achieve. @samayo Same thing applies to the image file.
    – cjustinobi
    Dec 6, 2017 at 10:11
  • I know how you can capture an image by accessing user's camera and upload it, b/c I am working on a library that does that but I don't know how to record a video but it should be easy according to the specifications of mediaDevices I'll share maybe if I implement the feature here
    – samayo
    Dec 6, 2017 at 10:15
  • @samayo how can I display it the image after I've choose it
    – Choy
    Aug 29, 2019 at 3:02
  • @Choy I forgot, I worked on vue very briefly but I remember it was very easy, check this fiddle jsfiddle.net/97dzkf70 you can get the idea
    – samayo
    Aug 29, 2019 at 13:40
  • @samayo btw may I know whats the ` const URL = 'foobar.com/upload'; ` refer to? If I'm using localhost should I change to localhost url?
    – Choy
    Aug 30, 2019 at 1:54
11

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

<template>
  <input type="file" accept="image/*" @change="onChange" />
  <div id="preview">
    <img v-if="item.imageUrl" :src="item.imageUrl" />
  </div>
</template>


<script>
export default {
  name: 'imageUpload',
  data() {
    return {
      item:{
          //...
          image : null,
          imageUrl: null
      }
    }
  },
  methods: {
    onChange(e) {
      const file = e.target.files[0]
      this.image = file
      this.item.imageUrl = URL.createObjectURL(file)
    }
  }
} 
</script>
6

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-input
       v-model="file"
       chips
       accept="image/*"
       label="Image"
       @change="onFileChange"
    />
</template>

<script>
export default {
    data: { file: null, image: null },
    methods: {
        onFileChange() {
            const reader = new FileReader()
            reader.readAsDataURL(this.file)
            reader.onload = e => {
                this.image = e.target.result
                console.log(this.image)
            }
        },
    },
}
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.