vue.js - Bootstrap-Vue 表单文件输入在删除时不检查文件格式

Question

我在 Vue 项目中使用 Bootstrap-Vue 组件，并将 Accept 属性设置为“image/*”。它与浏览按钮配合得很好，但我仍然可以将所有类型的文件拖放到文件表单中并且它接受它。这是一个错误还是我遗漏了什么？

<b-form-file
   accept="image/*"
   v-model="file"
   :state="null"
   placeholder="Choose a file or drop it here..."
   drop-placeholder="Drop file here..."
></b-form-file> 

Answer 1

Bootstrap-Vue 的 <b-form-file>组件，是原生 <input type="file"> 的包装器元素。哪里的input不可见，而是显示自定义标签，但仍利用输入进行文件处理。

这意味着它的功能与 native 输入相同，允许将任何内容放入其中。即使有 accept="image/*" applied 。 (至少在 Chrome 中)

当您的 v-model 时，您可能需要进行一些手动验证。进行更改以确保其格式正确。

例如，您可以创建一个 watcher如果输入的文件无效，则重置输入。

watch: {
  file(newFile) {
    if(newFile && !newFile.type.startsWith("image/")) {
      this.$nextTick(() => {
        this.file = null;        
      })
    }
  }
}