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