elementUI 上传upload组件和表单验证(自定义验证规则)
使用用户头像上传组件,
注意图片上传路径action路径问题,图片上传控制台报404错误,控制台 network选项卡查看请求。思考,发现请求路径不对,这里需要完整路径
![](https://img2022.cnblogs.com/blog/2746340/202202/2746340-20220222220327486-945670154.png)
el-upload 组件里的两个事件回调
图片上传:之前验证图片,大小、格式
图片上传:成功把服务器返回数据给表单
修改品牌名称和图片
思考这里拷贝数据为什么要用浅拷贝,扩展运算符实现浅拷贝{...row},思考直接赋值与浅拷贝与深拷贝关系
为什么这里不能用直接赋值,会导致拷贝失败,引用对象与原对象联动修改
直接赋值引用、深浅拷贝的学习链接---https://www.cnblogs.com/wanglei1900/p/15924101.html
![](https://img2022.cnblogs.com/blog/2746340/202202/2746340-20220222221602988-821064563.png)
表单验证 elementUI成熟组件,看文档即可学会
Form 组件提供了表单验证的功能,只需要通过
rules
属性传入约定的验证规则,并将 Form-Item 的 prop
属性设置为需校验的字段名即可![](https://img2022.cnblogs.com/blog/2746340/202202/2746340-20220222230532832-778398104.png)
表单验证规则
自定义校验规则 重点,注意自定义校验规则和rules的的书写位置
![](https://img2022.cnblogs.com/blog/2746340/202202/2746340-20220222223333097-591880324.png)
弹窗按钮发情求前需全部验证后通过,故需要在添加按钮的回调 外套一个表单全部通过验证,ref打点拿到需要验证的表单
注意,因为这里嵌套了验证函数,所以这里async标记需要套在就近的函数上
洗尽铅华始见金,褪去浮华归本真