elementui中设置upload的图片为必填项无效,图片上传成功,但依然无法通过验证
时间: 2024-03-26 11:35:24 浏览: 115
在 element-ui 中,设置 `upload` 组件的必填项验证需要使用 `rules` 属性。具体的做法是在 `rules` 数组中添加一个自定义验证函数,该函数的返回值为 true 或 false,表示验证是否通过。在验证函数中可以通过判断上传文件的个数或者文件名后缀是否符合要求等方式来进行验证。
以下是一个示例代码:
```html
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:before-upload="beforeUpload"
:on-success="onSuccess"
:rules="[{ validator: checkUpload, trigger: 'change' }]">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
```
```javascript
checkUpload(rule, value, callback) {
if (value.length === 0) {
callback(new Error('请选择上传文件'));
} else {
for (let i = 0; i < value.length; i++) {
const file = value[i];
const fileType = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase();
if (!(fileType === 'jpg' || fileType === 'png')) {
callback(new Error('上传文件只能是 jpg/png 格式'));
return;
}
if (file.size > 500 * 1024) {
callback(new Error('上传文件大小不能超过 500KB'));
return;
}
}
callback();
}
},
```
在这个示例中,我们定义了一个 `checkUpload` 函数作为自定义验证函数,并将其添加到 `rules` 数组中。在函数中,我们首先判断文件个数是否为 0,如果是则返回错误提示。如果不是,我们遍历所有上传的文件,判断其后缀名和大小是否符合要求,如果不符合则返回错误提示。最后,如果所有文件均符合要求,则调用 `callback()` 表示验证通过。
需要注意的是,自定义验证函数的第一个参数为当前验证规则,第二个参数为当前上传的文件列表,第三个参数为回调函数,用于返回验证结果和错误提示。在回调函数中,如果验证通过,则调用 `callback()`,否则调用 `callback(new Error('错误提示'))`。并且在 `rules` 中需要设置 `trigger: 'change'`,表示在 `change` 事件触发时进行验证。
阅读全文