vuejs

update file feature without dependecies with vue

<v-card flat>
    <v-card-title>Meta Tags</v-card-title>
    <v-card-subtitle class="mt-5 mb-n2">Social image</v-card-subtitle>
    <v-responsive>
        <v-img : src="previewImage" class="uploading-image d-block" />
              </v-responsive>
    <input
        type="file"
        id="myFile"
        name="myFile"
        accept="image/*"
                @change="uploadImage"
class="input-file"
/>
              <div class="d-flex justify-center mt-2 mb-3">
        <v-btn small outlined color="indigo darken-3">
            <label for="myFile">Upload your Image</label>
            <v-icon small right color="indigo darken-3">mdi-upload</v-icon>
        </v-btn>
    </div>
</v-card>

    <script>
        uploadImage(e) {
      const image = e.target.files[0];
          const reader = new FileReader();
          reader.readAsDataURL(image);
      reader.onload = e => {
            this.previewImage = e.target.result;
        this.fbImg = this.previewImage;
        this.twitterImg = this.previewImage;
        console.log(this.previewImage);
      };
    },

</script>
Was this helpful?