如何从 v-file-input Vuetify 中的文件对象观察器获取文件路径？

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>

如何从 v-file-input Vuetify 中的文件对象观察器获取文件路径？

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

javascript

filepath

vue.js

vuejs2

vuetify.js