时间戳

首页 > 解决方案 > 为 Vuetify v-file-input 提供初始文件名值

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

问题描述

我的模板中有这个 html：

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

我的组件还有一个名为的道具current，其中包含一个文本，即当前文件的名称。

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

我应该怎么办？

标签： vue.jsvuetify.js

解决方案

你可以使用value道具。但它不接受字符串。从文档：

value - 单个或一组File 对象

因此，例如，这有效：

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

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

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

推荐阅读