vue element-ui upload多图片上传,提交表单时再上传,编辑回显再编辑

记录用upload过程中的想法,做这个效果的想法是不想还没提交表单就已经上传了很多图片到服务器

效果

这个是新增数据,表单的图片效果,右上角没有绿色勾,表示还没上传
在这里插入图片描述
前面两张图片是第一次添加的图片,是已经上传的
在这里插入图片描述

开始

:auto-upload=“false”,阻止它自动上传
:file-list=“bookForm.file”,编辑回显用的 ,等于file就行了,不需要再设置flieList

data数据

data不需要fileList,
在这里插入图片描述

方法

编辑时,如果添加新图或者删除图片,this.bookForm.file = fileList;做验证,编辑初始化时,也可以显示图片在这里插入图片描述
在这里插入图片描述

因为upload,多张图片上传,每次上传一张,on-success就调用一次,所以的做判断,上传成功的图片数量==fileList.length才能提交表单数据
在这里插入图片描述
点击提交时,做验证
在这里插入图片描述

编辑时获取图片数据
在这里插入图片描述

样式

在这里插入图片描述

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值