element ui ---- el-upload实现手动上传多个文件

ui部分

<el-upload
        ref="upload"
        drag
        :file-list="fileList"
        :auto-upload="false"
        :on-change="onchange"
        :on-remove="handleRemove"
        action="javascript:void(0)"
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>

js 实现上传

// 上传函数
handleUpload() {
      const formData = new FormData()
      // fileList 在data中定义的数组，把所有文件放到formData中
      this.fileList.forEach((f) => {
        formData.append('file', f.raw)
      })
      // 上传文件 api 【createFileRequest是自己封装的一个接口】
      createFileRequest(formData)
        .then((res) => {
          this.msgSuccess('文件上传成功')
          this.fileList = []
        })
        .catch((e) => {
          this.msgError('文件上传失败')
        })
    },
    onchange(file) {
      if (file.size / 1024 / 1024 < 100) {
        this.fileList.push(file)
      } else {
        this.msgError('文件过大')
        this.handleRemove(file)
      }
    },
    // 文件删除处理
    handleRemove(file) {
      this.fileList = this.fileList.filter((f) => file.name !== f.name)
    }