How to get file path from File object observer in v-file-input Vuetify?

user_12557324 0
Viewed 5361

I am building feature upload image with Vuetify. I need preview image before upload to server

In v-input-file

<v-file-input
  accept="image/*"
  multiple
  label="Add your files"
  chips
  filled
  prepend-icon="mdi-camera"
  @change="onAddFiles"
></v-file-input>

In method change

onAddFiles(files) {
  console.log(files);
}

enter image description here

You can see there is no information file path in File object observer array

I don't know how to get file path from this File object observer. Please help me and i'm so grateful!

vuejs2 vuetify.js vue.js filepath javascript
1 Answers

in data, include the following

previews: [],
errorImage: "url of an image to use to indicate an error",

obviously you need to set errorImage to something useful

Then add some code to onAddFiles to generate an array of previews

onAddFiles(files) {
    this.previews = [];
    files.forEach((file, index) => {
        const reader = new FileReader();
        reader.addEventListener('load', e => this.previews[index] = e.target.result);
        reader.addEventListener('error', e => this.previews[index] = this.errorImage);
        reader.readAsDataURL(file);
    });
}

In your markup - wherever you want you previews shown, something like

<span v-for="src in previews">
    <img v-if="src && src.length" :src="src"/>
</span>
user_50530020
Related