关于这个问题已经有很多文章给出了解释，是做了两个按钮，一个上传文件一个调用接口，但这不是我想要的效果，我想用一个按钮来搞定。

由于后端给了上传接口，所以不采用el-upload自带的上传方式，而是用自己封装好的接口

不多逼逼，先上代码，再解释：

<el-upload
  ref="uploadRemark"
  multiple
  :http-request="uploadFile"
  action="..."
  :before-upload="handleBeforeUpload"
  :limit="10"
  :show-file-list="false"
  :on-exceed="handleExceed"
  :file-list="form.files">
  <el-button size="small" type="text">上传附件</el-button>
</el-upload>

1.action自己随意填写，反正用不上，但是不写报错

2.multiple控制多选文件

3.http-request为自定义上传方式，但在本文中他不是主角，仅用来屏蔽action字段

4.现需求是最多可以上传10个文件，每个最大5M，批量上传文件

5.其他字段非必选，按照需求自行添加即可

后端给的接口一次只能上传一个文件，所以只要顺利的话在http-request字段定义的方法中直接循环调用就可以了，虽然麻烦但是管用就行。but天不遂人愿，el-upload的多文件上传方式很奇怪，它是递增数列似的上传。

例子：上传两个文件的话，el-upload会上传两遍，第一遍是上传第一个文件；第二遍是上传第一个文件再上传第二个文件，因此最终的结果是上传了三次文件。

这个问题如果不需要回显文件列表的话没有问题，但是我这有问题，我需要回显文件列表，还需要做文件下载的进度条

经过百般查找我发现before-upload调用的方法很神奇的会对所有文件一个个地输出判断，这就给我操作的余地了嘛(*^▽^*)

vue elementui 批量上传文件 el-upload批量上传_文件列表

 既然他是一个一个文件传进来的，那么我连循环都不用写了啊！

这个方法只要用来做上传前的验证：

// 项目附件上传前判断大小并添加
handleBeforeUpload(file) {
  const isLt2M = file.size / 1024 / 1024 < 5
  if (!isLt2M) {
    this.$message.error('上传文件大小不能超过 5MB!')
    return isLt2M
  } else {
    // 符合条件就直接上传
    this.form.files.push(file) // 条件符合的可以加进files列表进行显示

    let fd = new FormData() // 以FormData形式传参
    fd.append('file', file)
    callback(fs)
  }
},

这样的话不仅上传文件能成功，文件列表的回显也是没有问题哒！