如何用Vue和ElementUI实现多图上传及回显，图片回显后改为如何轻松实现多图上传效果？

本文共计1161个文字，预计阅读时间需要5分钟。

最近有使用vue+elementUI实现多图片上传的需求，需要记录以下步骤。本次主要记录前端实现细节，后台使用Multipart[]数组接收即可，不再赘述。具体实现过程可参考网上相关文章。

最近有使用vue+elementUI实现多图片上传的需求，遂做此纪录。
本次主要写一下前端的实现细节，至于后台以Multipart[ ]数组接收即可，不再赘述，网上一搜大把文章可供参考。
本次使用elementui的上传图片控件的照片墙类型，其使用示例可具体查看官方文档

Elementui 多图上传控件

需要注意的是，官方文档中的示例采用自动上传的方式，大多数情况我们是需要点击上传按钮或和表单一起提交才开始上传的（即手动上传），此时官方的示例就不满足我们的需求了。怎么办？当然是自己动手丰衣足食啦！！！
进入正题实现后以及上传保存成功后的效果如图

实现代码

这里有几个属性需要注意一下（敲黑板！！！）

因为本次采用手动上传所以需要把action属性置为空，上传的url我们在点击确定时再传给控件的方法
multiple：表示支持多图上传
auto-upload：表示自动上传此处需要设置为“true”(原因下面重点讲)
accept表示允许上传的图片后缀（填写好后点击选择图片的按钮时，浏览器会过滤掉不属于这些后缀的图片。