elementui多图片上传与删除

自己定义的elementui多文件上传组件

子组件（直接cope到一个vue页面上，在父组件引入，父组件重要的代码在下面）

<template>
  <div>
    <el-upload class="avatar-uploader" ref="avatarUploader" list-type="picture-card" :file-list="fileInfo.fileList" :action="$utils.getUploadUrl()" :headers="$utils.getTokens()" :on-success="suc" :on-remove="remove" :on-error="err" :before-upload="beforeUpload" :limit="fileInfo.limit" :on-exceed="exceedMsg" :on-preview="preview" multiple>
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      ![文件]()
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    fileInfo: {
      type: Object,
      default: function() {
        return {
          fileList: [],
          limit: 1
        }
      }
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  created() {},
  methods: {
    
    beforeUpload(file) {
      this.$loading({
        background: 'rgba(255, 255, 255, 0.7)',
        customClass: 'animated fadeIn',
        text: '上传中'
      })

      let getStr = this.$utils.fileNameSub(file.name)
      let extension = this.$utils.valiFileFormat(getStr)

      if (!extension) {
        this.$message.error('文件格式有误!')
        this.$loading({
          customClass: 'animated fadeOut'
        }).close()
        return false
      }

      let isLt2M = this.$utils.valiFileSize(file.size)

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        this.$loading({
          customClass: 'animated fadeOut'
        }).close()
        return false
      }
      return extension && isLt2M
    },
    suc(r, file, fileList) {
      fileList.forEach(v => {
        if (file.uid === v.uid) {
          // 上传成功后赋值对应的值
          var fileSucInfo = {
            name: file.name,
            url: v.response.data
          }

          this.$emit('uploadListSuc', fileSucInfo)
        }
      })

      this.$loading({
        customClass: 'animated fadeOut'
      }).close()
      this.$message.success('上传成功')
    },
    err() {
      this.$message.error('图片上传失败，请稍后重试')

      this.$loading({
        customClass: 'animated fadeOut'
      }).close()
    },
    remove(file, fileList) {
      fileList = fileList.map(v => {
        return {
          name: v.name,
          url: v.hasOwnProperty('response') ? v.response.data : v.url
        }
      })

      this.$emit('uploadListRemove', fileList)
    },
    exceedMsg(files, fileList) {
      this.$message.warning(`最多上传${this.fileInfo.limit}个文件`)
    },
    preview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

<style>
</style>

在父组件上

// 引入子组件
import uploadList from '子组件地址'



// template:
<uploadList :fileInfo="这里定义存储多图片地址的数据 比如： fileLIst" @uploadListSuc="成功后的回调函数  比如：JX_uploadSuc(" @uploadListRemove="失败后的回调函数    比如：GJ_vdeoPicSucRemove"></uploadList>

// JS
components: {
	uploadList
}
data() {
	return {
	  fileLIst: []
	}
}

//  移除函数
    GJ_vdeoPicSucRemove(fileList) {
      // fileList -> 移除后的图片列表
    }
 // 成功后的函数
 JX_uploadSuc(r) {
      // r -> fileList上传的图片列表
    }
``

this.$之类的都是我封装好的，这里粘贴this.$utils封装好的代码
```js
   // 文件名截取
  fileNameSub(fileName) {
    return fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length)
  },
  /**
   * 效验文件格式
   * param {String} - fileType:获取当前上传文件的格式 - format:当前要效验的文件格式
   *
   */
  valiFileFormat(fileType, format = ['jpg', 'jpeg', 'png', 'gif']) {
    return format.some(v => fileType === v)
  },
  /**
   * 效验文件大小
   *
   */
  valiFileSize(fileSize, size = 2) {
    return fileSize / 1024 / 1024 <= size
  }
``