Vue vuelidate 不工作文件类型输入

Question

我习惯了validate for vue js form validation.(https://vuelidate.js.org/#getting-started)

我的所有场景都很好用。

但它在表单上传文件验证中不起作用。

由于文件类型输入无法设置v-model属性，我在添加v-model属性时出现如下错误

'v-model' directives don't support 'file' input type.

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

<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 但这也不起作用。如果你知道这个解决方案。请与我分享。

Answer 1

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

我的错误是 model value init file: [] & requiredIf condition.

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中非常有用

Answer 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);
}

Vue vuelidate 不工作文件类型输入

Vue vuelidate not working file type input

vue.js

vuelidate