一.介绍：element-ui提供了上传照片的组件，el-upload能够给用户提供上传照片的服务，照片墙是指能够向服务器上传一组照片。
二.基础使用
<el-upload
action="/dev-api/admin/product/fileUpload"
list-type="picture-card"
:on-success="handleAvatarSuccess"
:on-preview="handleReshow"
:on-remove="handleImg"
:file-list="imageList">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog
:visible.sync="dialogVisible"
width="30%">
<img width="100%" :src="dialogImageUrl">
</el-dialog><script>
handleAvatarSuccess(response, file, fileList) {
// response表示上传结果
// file表示当前上传的文件
// fileList表示当前成功上传的图片数组
// 将图片保存
this.imageList = fileList
},
// 图片预览
handleReshow(file){
this.dialogImageUrl = file.url
// 展示对话框
this.dialogVisible = true
},
// 删除图片
handleImg(file,fileList){
// file代表将要删除的文件
// fileList为删除此图片之后剩下的图片列表
// 更新
this.imageList = fileList
}
</script>字段的基础介绍
1.action：上传至服务器的地址，通常为后端提供的接口。
2.list-type：上传之后，图片的显示类型，有三种text、picture、picture-card。
--text类型显示为文本类型，预览时不能看到上传的图片
-- picture类型为长图片类型，预览时能够看到上传的图片
--picture-card类型是方图片类型，预览时能够看到上传的图片
3.on-success属性：图片上传服务器成功会触发相应回调，回调函数有三个参数：response（图片上传后，服务器返回的数据）、file（当前图片文件的数据）、fileList（当前已上传图片的所有数据，为数组）
4.on-preview属性：图片预览，回调函数只有一个参数：file（当前预览图片的相关数据）
5.on-remove属性：删除图片，回调函数有两个参数：file（当前将删除文件的相关数据）、fileList（删除成功之后，剩下的所有上传图片数组）
6.file-list属性：存储已经上传的图片数组数据
三.注意点
1.file-list属性中，每个图片的数据，必须含有name（图片名称）和url（图片路径）两个字段，这是图片显示的必要字段，如果服务器返回的数据字段不相符，需要进行整理数据。
2.el-dialog对话框是图片预览时显示图片所用，数以此对话框是书写在el-upload组件外面的，注意不要写在里面，否则在预览图片对话框消失的时候，会再次触发上传图片的选择。