Answer a question

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);
}

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!

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>