[Vuejs]-Unable to upload a file using Vue.js to Lumen backend?

0👍

Here is an example. you can try it

index.vue

`<div id="app">
  <div v-if="!image">
    <h2>Select an image</h2>
    <input type="file" @change="onFileChange">
  </div>
  <div v-else>
    <img :src="image" />
    <button @click="removeImage">Remove image</button>
  </div>
</div>`

    new Vue({
       el: '#app',
       data: {
          image: ''
        },
       methods: {
          onFileChange(e) {
            var files = e.target.files || e.dataTransfer.files;
            if (!files.length)
            return;
            this.createImage(files[0]);
          },
          createImage(file) {
            var image = new Image();
            var reader = new FileReader();
            var vm = this;

            reader.onload = (e) => {
               vm.image = e.target.result;
            };
            reader.readAsDataURL(file);
          },
          removeImage: function (e) {
             this.image = '';
          }
       } 
    })

Leave a comment