需求：用element-ui做后台管理，碰到使用图片上传修改和删除功能，刚开始想点击修改显示放一个img标签，但是和上传成功后的图片框样式不对，还不显示删除放大功能。
方案：查看文档发现,可以使用 file-list 绑定一个数组实现,具体如下
代码：

<template>
  <el-table label="操作" width="200">
  		<template slot-scope="scope">
            <el-button type="warning" icon="el-icon-edit" @click="btnAlter(scope.row)" />
            <el-button type="danger" icon="el-icon-delete" @click="btnDel(scope.row.id)" />
         </template>
  </el-table>
  <div>
	  	<el-form>
		  	<el-form-item label="轮播图">
		    <el-upload
		    ref="bb"
		    action="服务器地址"
		    list-type="picture-card"
		    :on-preview="handlePictureCardPreview"
		    :on-remove="handleRemove" //  // 图片删除触发
		    :on-success="handleSuccess" // 图片上传成功触发
		    :file-list="echoImgList" // 图片列表
		     >
		     <i class="el-icon-plus" />
		     </el-upload>
		          <el-dialog :visible.sync="dialogVisible3" append-to-body>
		            <img width="100%" :src="dialogImageUrl" alt="">
		          </el-dialog>
		      </el-form-item>
	   	</el-form>
  </div>
</template>
<script>
export default{
  data(){
  	return{
  	 echoImgList: [] // 图片列表 
  	 addList:{} // 绑定的列表数据
  	}
  },
  methods:{
  // 点击修改显示图片
  	   //  点击修改获取到当前列表行的数据 
    btnAlter(data) {
      this.addList = Object.assign({}, data) // 把当前行数据复制给绑定数据
      // 如果后台返回的图片字符串不为空
      if (this.addList.img_list) {
        this.echoImgList = [] // 先清空绑定的图片列表
        const aa = this.addList.img_list.split(',')  // 把图片字符串分割成数组
		// 遍历图片数组 push到echoImgList绑定列表 然后点击修改的时候图片就会显示了
        aa.forEach((item, index) => {
          if (aa.length) {
            this.echoImgList.push({
              url: item,
              name: index + '.png'
            })
          }
    },
    // 修改添加图片操作
       handleSuccess(response, file, fileList) {
      console.log(response) 
      console.log(file)
      console.log(fileList) // 图片上传成功返回的图片数据列表
      const aa = []
      // 遍历这个列表 
      fileList.forEach(item => {
       // 判断列表中的每一项是否有response属性（图片上传添加的对象和echoImgList添加的对象，里面的属性值不一样）
        if (!item.response) {
          aa.push(item.url)
        } else {
          aa.push(item.response.data.fileList[0])
        }
      })
      console.log(aa)
      this.addList.img_list = aa
    },
        // 修改删除某项图片 （方法相同）
    handleRemove(file, fileList) {
      console.log(file, fileList)
      const aa = []
      fileList.forEach(item => {
        if (!item.response) {
          aa.push(item.url)
        } else {
          aa.push(item.response.data.fileList[0])
        }
      })
      this.addList.img_list = aa
    },
  }
}
</script>
// 之后就是点确认的时候把参数传给后台就可以了，后台如果要的是图片字符串，记得发送请求之前把数据转换一下