vue.js - 为 Vuetify v-file-input 提供初始文件名值

Question

我的模板中有这个 html:

        <v-file-input
          :label="label"
          accept="image/*"
          prepend-icon="mdi-camera"
          @change="uploadImage"
          hide-details
          outlined
        />

我的组件还有一个名为 current 的 Prop 它包含一个文本，它是当前文件的名称。

当组件显示时 v-file-input为空，但我希望它包含当前文件名的名称。我试过 :value="current"和 v-model="current"无济于事。

我该怎么办？

Answer 1

您可以使用 value支柱。但它不接受字符串。从文档:

value - A single or array of File objects

因此，例如这有效:

data() {
    return {
      current: new File(["foo"], "foo.txt", {
                  type: "text/plain",
                })
    }
  }

<v-file-input label="File input" :value="current" ></v-file-input>

这样做是否是个好主意是不同的问题:) 你知道，你拥有的不仅仅是文件名，它包括内容在内的整个文件。如果用户像这样提交您的表单怎么办？也支持 File() constructor不是那么好......例如在Edge上不起作用......