如何從 v-file-input Vuetify 中的文件 object 觀察者獲取文件路徑？

Question

我正在使用 Vuetify 構建功能上傳圖像。 在上傳到服務器之前我需要預覽圖像

在 v-input-file 中

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

在方法改變

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

可以看到File object observer數組中沒有信息file path

我不知道如何從此File object observer獲取file path 。 請幫助我，我非常感激！

Answer 1

在數據中，包括以下內容

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

顯然你需要將errorImage設置為有用的東西

然后在onAddFiles中添加一些代碼來生成預覽數組

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

在您的標記中 - 無論您希望在哪里顯示預覽，例如

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