Vue vuelidate 不工作文件类型输入答案

【问题标题】：Vue vuelidate not working file type inputVue vuelidate 不工作文件类型输入
【发布时间】：2020-10-13 07:15:41
【问题描述】：

我使用 validate 进行 vue js 表单验证。(https://vuelidate.js.org/#getting-started)

很适合我的所有场景。

但它不适用于表单上传文件验证。

因为文件类型输入无法设置 v-model 属性，我在 v-model 属性添加时间出现以下错误。

“v-model”指令不支持“文件”输入类型。

所以这个值没有改变。下面是我的代码示例。

<input type="file" id="input-file-now" class="dropify" multiple accept="image/*"
  @change="model.file = eDatas.target.files" v-bind:class="{'is-invalid': $v.model.file.$error}">
<div v-if="$v.model.file.$error" class="invalid-feedback">
  Select Image
</div>


data () {
  return {
    model: {}
  }
},
validations: {
  model: {
    title: { required },
    file: {
      required: requiredIf(function (nestedModel) {
        return !this.model.file || this.model.file.length == 0;
      })
    }
  }
},

我尝试requiredIf，但这也不起作用。如果你知道这个解决方案。请与我分享。

【问题讨论】：

我现在不在电脑附近来测试这个解决方案，但我认为你可以这样做：<input v-model="model.files" .../> 然后 VueValidate 会发现 v-model 不为空并正确验证它跨度>
@JaiKumaresh 你知道你不能奖励你自己的答案吗？

标签： vue.js vuelidate

【解决方案1】：

我弄错了。而requiredIf是表单文件类型输入验证的解决方案。

我的错误是model value init file: [] & requiredIf 条件。

data () {
  return {
    model: {
      file: [] // New changes
    }
  }
},
validations: {
  model: {
    title: { required },
    file: {
      required: requiredIf(function (nestedModel) {
        return this.model.file.length == 0; // New changes
      })
    }
  }
}

validate(https://vuelidate.js.org/#getting-started) 在 vue js 中非常有用

【讨论】：

【解决方案2】：

这是在我的情况下运行良好的代码...

Vue 模板

<input type="file" :class="{ 'is-invalid': $v.imageFile.$error }" 
@change="imageFileChanged($event)" accept="image/png, image/jpeg" />

脚本代码：

export default {
  data() {
    return {
      imageFile: ""
    }
  },
  validations: {
    imageFile: {
      file_size_validation
    }
  },
  methods: {
    imageFileChanged(event) {
      var files = event.target.files || event.dataTransfer.files;
      if (!files.length) {
        return;
      }
      this.imageFile = files[0];
    },
  }
}

验证：

const file_size_validation = (value, vm) =>  {
  if (!value) {
    return true;
  }
  let file = value;  return (file.size < 2097152);
}

【讨论】：