<el-upload
              ref="upload"
              action="#"//上传的服务器地址
              :auto-upload="false"//是否自动上传，false不自动上传
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"//图片预览
              :on-remove="handleRemove"//删除图片方法
              :on-change="(file, fileList) => {uploadSuccess(file, fileList)}" //上传成功或者失败都会调用on-change
              :file-list="imageList" //回显的列表
              >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" append-to-body class="checkPic">
              <img width="100%" :src="dialogImageUrl" alt="">//图片预览的弹框
            </el-dialog>

export dafault {
  data (){
    return {
        dialogImageUrl: '',
        imageList:[],
        fileList:[],
      }
  },
methods:{
      //删除已上传图片
      handleRemove(file, fileList) {
        //file是当前删除的图片，fileList是已上传图片列表
          this.imageList =fileList
          this.fileList = fileList
        },
      //图片预览
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
        },
      // 上传成功时的钩子
      uploadSuccess(file,fileList){
        console.log(fileList)
        let that =this
        var fileType = file.raw.type;
        var isJpg = false;
        if (fileType == 'image/jpeg' || fileType == 'image/png' || fileType == 'image/jpg') {
            isJpg = true;
        }           
        if (!isJpg) {
            this.$message({
            message: '上传的图标只能是jpg、png格式!',
            type: 'error'
          });
          return false
        }
         this.fileList= fileList
        this.imageList =fileList
      },
        let formList = new FormData();
        this.fileList.forEach( (file)=>{
          formList.append('fileList', file.raw);
        })
      //formList就是传给后台的值啦
  }
}