你可以使用
Vue.js 的插件
Vue-Validator 来实现
文件上传的
校验。首先，你需要在项目中安装
Vue-Validator 插件，然后在需要使用
校验的组件中引入该插件。
下面是一个简
单的例子，展示了如何使用
Vue-Validator 来
校验文件上传：
```html
<template>
<div>
<input type="file" @change="onFileChange" />
<p v-if="errors.length">{{ errors[0] }}</p>
</div>
</template>
<script>
import
VueValidator from '
vue-validator'
export default {
name: 'FileUpload',
data() {
return {
file: null,
errors: []
}
},
mixins: [
VueValidator],
methods: {
onFileChange(event) {
this.file = event.target.files[0]
this.$validate()
}
},
validators: {
file: (value) => {
if (!value) {
return '请上传
文件'
}
if (value.size > 1024 * 1024) {
return '
文件大小不能超过1M'
}
return true
}
}
}
</script>
```
在上述代码中，我们定义了一个名为 FileUpload 的组件，它包含一个
文件上传的输入框和一个用于显示错误信息的
段落。在组件的 data 中定义了一个 file 变量和一个用于存储错误信息的 errors 数组。
在组件的 methods 中定义了一个 onFileChange
方法，用于在
文件上传的输入框内容变化时更新 file 变量，并且调用 this.$validate()
方法进
行校验。
在组件的 validators 中定义了一个 file
校验规则，用于判断
文件是否为空和
文件大小是否超过1M，并根据
校验结果返回相应的错误信息或者 true。
最后，在组件中使用
Vue-Validator 提供的 mixins 属性将
VueValidator 插件混入组件中，这样就可以使用该插件提供的
校验方法了。当输入框内容变化时，会触发
校验规则并将
校验结果存储在 errors 数组中，用于在页面上显示错误信息。
1650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
