el-upload批量上传
最近在处理 el-upload 上传图片,上传单张图片成功时直接在on-success里面进行 push ,图片成功展示。
但在进行批量上传的时候 在on-success里面进行 push ,图片只能 push 第一张进去。
因为在 on-success 只会对 status = ‘success’ 图片进行处理,在执行第一张图片时候,其他的图片状态还是 uplaoding。然后对 fileList 进行了 push 操作,后面图片的 on-success 就不会执行了。
所以 批量上传 时需要对 fileList 进行处理,需要等所有图片都成功时再进行push操作。
由于 on-success 第三个参数 fileList 会展示所有的图片,即在给 el-upload 设置了默认图片也会展示,push时会出现异常,所以可以根据 图片上传接口 响应出参进行特殊处理。
<el-upload
multiple
list-type="picture-card"
:headers="headers"
:data="dataObj"
:action="action"
:file-list="fileList"
:limit="20"
:before-upload="beforeUpload"
:on-success="handleImageSuccess"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-exceed="handleExceed"
>
</el