为Vuetify v-file-input给予初始文件名值

fumotvh3  于 2022-11-25  发布在  Vue.js
关注(0)|答案(4)|浏览(135)

我的模板中包含以下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",但没有效果。
我该怎么办?

5jdjgkvh

5jdjgkvh1#

你可以使用value prop,但是它不接受字符串。
value -单个值或File objects数组
例如,这是可行的:
第一个
这样做是否是一个好主意是不同的问题:)你知道,你所拥有的不仅仅是文件名,它的整个文件包括内容。如果用户这样提交你的表单怎么办?另外,对File()constructor的支持不是很好....例如,在Edge上不起作用...

vlurs2pr

vlurs2pr2#

您可以使用placeholder属性执行以下操作:

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

样式可能与“普通”文本有点不同,但一点css可能可以解决这个问题。

hc8w905p

hc8w905p3#

而应使用计算属性,因为属性是不可变的,并且使用值进行数据绑定v-model="value"

computed () {
    value: {
      get () {
        return this.current
      },
      set (val) {
        this.value = val
      }
    }
  }
f87krz0w

f87krz0w4#

解决方法:
DOM:

<v-file-input v-model="file" class="v-file-input"></v-file-input>

CSS:

/**/
.v-file-input label {
    /**/
    transform: translateY(-6px) scale(.75) !important;
    /**/
}

JS:

/**/
new Vue({
    /**/
    el: "#app",
    /**/
    vuetify: vuetify,
    /**/
    data: () => ({
        /**/
        default: {
            /**/
            name: null,
            /**/
            size: null,
            /**/
        },
        /**/
        file: null,
        /**/
    }),
    /**/
    updated(){
        /**/
        $(".v-file-input").find(".v-file-input__text").html(this.file ? `<div>${this.file.name} (${this.readableBytes(this.file.size)})</div>` : this.default.name ? `<div>${this.default.name} (${this.readableBytes(this.default.size)})</div>` : "");
        /**/
    },
    /**/
    methods: {
        /**/
        readableBytes: function(x){
            /**/
            const units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
            /**/
            var i = 0, n = parseInt(x, 10) || 0;
            /**/
            while(n >= 1024 && ++i){
                /**/
                n = n / 1024;
                /**/
            }
            /**/
            return n.toFixed(n < 10 && i > 0 ? 1 : 0) + " " + units[i];
            /**/
        },
    }
});

相关问题