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不可见，而是显示自定义标签，但仍利用输入进行文件处理。

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

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

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

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