将初始文件名值赋予 Vuetify v-file-input

Question

我的模板中有这个 html：

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

我的组件还有一个名为的 prop current，其中包含一个文本，该文本是当前文件的名称。

当显示组件时，它v-file-input是空的，但我希望它包含当前文件名的名称。我已经尝试过了:value="current"，但v-model="current"没有成功。

我应该怎么办？

Answer 1

您可以使用value道具。但它不接受字符串。来自文档：

value - 单个文件对象或文件对象数组

例如，这有效：

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

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

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