饿了么element组件库el-upload组件表单校验问题

本文介绍如何在使用饿了么el-upload组件时,解决上传文件后表单校验提示无法清除的问题。通过为el-form-item添加ref属性,并在on-success方法中调用clearValidate()方法,可以成功清除校验提示。

最近在用饿了么的el-upload组件时候,需要用到表单校验,但是遇到了一个问题,如图所示:

(点击提交时候触发了表单校验提示:“请上传身份证正面照”,但是上传之后表单校验提示信息无法清除。)

解决办法如下:

在有el-upload的那一个el-form-item上添加ref='xxxxx',然后在下面的on-success方法中加上this.$refs.xxxxx.clearValidate()这一句代码,即可清除掉对应的校验提示信息了,如下图所示:

### 使用 `el-upload` 组件上传单个图片 为了实现使用 `el-upload` 组件上传单张图片的功能,可以按照以下方式配置该组件。此方法允许用户选择并上传一张图片到服务器。 #### 基本模板结构 ```html <template> <div class="upload-demo"> <!-- 设置属性 :limit=1 来限制只可上传一个文件 --> <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :before-upload="beforeAvatarUpload" :file-list="fileList" :limit="1" :on-exceed="handleExceed" ref="uploadRef"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </div> </template> ``` #### 脚本部分逻辑 ```javascript <script> export default { data() { return { dialogImageUrl: '', dialogVisible: false, fileList: [] }; }, methods: { handleRemove(file, fileList) { console.log(file, fileList); }, handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, beforeAvatarUpload(file) { const isJPG = file.type === 'image/jpeg'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error('上传头像图片只能是 JPG 格式!'); } if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); } return isJPG && isLt2M; }, handleExceed(files, fileList) { this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`); } } }; </script> ``` 上述代码展示了如何利用 `el-upload` 实现单一图片的选择与上传功能[^1]。这里设置了 `list-type="picture-card"` 属性用于显示缩略图样式;并通过 `:limit="1"` 控制仅能上传一张照片。同时提供了钩子函数如 `before-avatar-upload` 对上传前的文件做校验工作,以及 `handle-picture-card-preview` 和 `handle-remove` 方法分别用来处理预览和移除事件。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值