element-ui -- 照片墙

一.介绍: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组件外面的,注意不要写在里面,否则在预览图片对话框消失的时候,会再次触发上传图片的选择。




更多推荐
所有评论(0)