Bootstrap-Vue 表单文件输入在删除时不检查文件格式答案

【问题标题】：Bootstrap-Vue Form File Input does not check file-format when droppingBootstrap-Vue 表单文件输入在删除时不检查文件格式
【发布时间】：2020-07-13 01:45:27
【问题描述】：

我在 Vue 项目中使用 Bootstrap-Vue 组件，其接受属性设置为“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>

【问题讨论】：

标签： vue.js bootstrap-vue

【解决方案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;        
      })
    }
  }
}

【讨论】：

嗨@Hiws——效果很好，感谢您的解释和代码！非常感谢！
也谢谢你。只是在寻找某种验证，现在允许除 csv 之外的任何其他内容。