element-ui上传多文件并且有进度条，直接上传，并且给出实际项目示列

好的，下面给出一个实际项目中使用Element UI上传多文件并且有进度条的示例代码，供你参考。

<template>
  <el-upload
    class="upload-demo"
    ref="upload"
    :action="uploadUrl"
    :on-success="handleSuccess"
    :on-error="handleError"
    :on-progress="handleProgress"
    :before-upload="beforeUpload"
    :multiple="true"
    :file-list="fileList"
    :auto-upload="false"
    :show-file-list="false"
    :headers="headers"
  >
    <el-button size="small" type="primary" style="margin-right: 10px;">选择文件</el-button>
    <el-button size="small" type="success" @click="uploadFile">上传</el-button>
    <template slot="tip">
      只能上传jpg/png文件，且不超过2M
    </template>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [], // 上传文件列表
      uploadUrl: '/api/upload', // 文件上传接口地址
      headers: {
        // 设置请求头
        Authorization: localStorage.getItem('token')
      }
    }
  },
  methods: {
    beforeUpload(file) {
      // 上传前的校验
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }

      return isJPG && isLt2M
    },
    handleSuccess(response, file, fileList) {
      // 上传成功后的回调
      this.$message.success('上传成功')
    },
    handleError(err, file, fileList) {
      // 上传失败后的回调
      this.$message.error('上传失败')
    },
    handleProgress(event, file, fileList) {
      // 处理上传进度条
      file.percent = event.percent
      this.fileList = fileList
    },
    uploadFile() {
      // 点击上传按钮，上传文件
      this.$refs.upload.submit()
    }
  }
}
</script>

在上面的代码中，el-upload组件的属性和方法都进行了详细的注释说明。需要注意的是，为了支持上传进度条的显示，我们需要在handleProgress方法中手动更新文件列表的percent属性。同时，为了支持手动点击上传按钮，我们需要使用$refs来获取到el-upload组件的实例，然后调用submit方法进行文件上传。

以上就是一个简单的Element UI上传多文件并且有进度条的示例代码，你可以根据自己的实际需求进行修改和扩展。