如何从 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>