基于elementui的upload组件实现多个文件的上传，并实时清除上传成功的文件

基于elementui的upload组件实现多个文件的上传，并实时清除上传成功的文件

官方文档：elementui-upload

主要内容：

1. 设置multiple为true，实现多个文件的选中
2. 设置 :file-list="fileList"进行数据的绑定，便于后面进行列表的操作
3. 设置 :on-success="successUpload"绑定上传成功的函数

代码

<template>
  <div>
    <el-upload
      ref="upload"
      action="可以进行上传的地址"
      :multiple="true"
      :file-list="fileList"
      :on-success="successUpload">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">未上传{{ fileList.length }}，已上传{{ uploaded }}</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fileList: [],
      uploaded: 0
    }
  },
  methods: {
    successUpload(response, file, fileList) {
    // 上传也是一个一个文件上传，每次上传成功就会执行该函数
    // 通过对fileList进行过滤，根据文件名称删除fileList中当前已成功上传的文件
      this.uploaded += 1
      fileList = fileList.filter((element) => {
        return element.name !== file.name
      })
      this.fileList = fileList
    }
  }
}
</script>