Vue+elementUI实现多图片上传与回显功能（含回显后继续上实现多图片上传与回显功能（含回显后继续上
传或删除）传或删除）
主要介绍了Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）,本文通过实例代码给大家
介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
最近有使用vue+elementUI实现多图片上传的需求，遂做此纪录。
本次主要写一下前端的实现细节，至于后台以Multipart[ ]数组接收即可，不再赘述，网上一搜大把文章可供参考。
本次使用elementui的上传图片控件的照片墙类型，其使用示例可具体查看官方文档
Elementui 多图上传控件
需要注意的是，官方文档中的示例采用自动上传的方式，大多数情况我们是需要点击上传按钮或和表单一起提交才开始上传的
（即手动上传），此时官方的示例就不满足我们的需求了。怎么办？当然是自己动手丰衣足食啦！！！
进入正题实现后以及上传保存成功后的效果如图
实现代码
这里有几个属性需要注意一下（敲黑板！！！）
因为本次采用手动上传所以需要把action属性置为空，上传的url我们在点击确定时再传给控件的方法
multiple：表示支持多图上传
auto-upload：表示自动上传此处需要设置为“true”(原因下面重点讲)
accept表示允许上传的图片后缀（填写好后点击选择图片的按钮时，浏览器会过滤掉不属于这些后缀的图片。如需要多个值
用“，”隔开）
list-type：图片显示样式，可以参考官方文档
file-list:图片回显的文件列表
before-upload:上传前执行的方法，可以在这里检查图片的类型、大小等
http-request:该方法会携带一个content参数使用其属性content.file可以获取到将要上传的文件对象
on-preview:触发图片预览时的方法
on-exchange:图片列表更改时触发的方法，该方法携带（file,fileList）两个参数，file表示刚刚新增到图片列表的文件，fileList表
评论0