需求：Vue项目中使用element-ui的el-upload上传文件，由于页面中除了文件上传，还有表单数据需要一起提交，所以不能使用el-upload的默认上传，而官方文档提供了http-request自定义上传方法来覆盖组件默认的上传方式，如下图：

image.png

所以我们可以在自定义上传方法中，配合使用axios来提交上传文件

需要注意的是：

自定义的上传方式就是模拟html表单上传文件，所以我们使用new FormData()来向后台传送文件，
而el-upload上传文件是一个一个文件上传的，所以我们可以在on-change函数里面遍历fileList，把每个子项的 raw(File文件) 取出来，放在一个数组里面保存，在自定义上传方法里，用FormData格式，每次取数组中的第一个进行递归上传，每取一个文件，上传文件数组里就删除一个，数组为空则不再递归运行(自定义上传方法)，具体代码如下：

<template>
  <div class="inside-base">
    <div class="up-filebox">
      <i class="tips" v-show="showUpFile">可上传pdf、ppt、word、excel等不超过25M</i>
      <el-upload
        action=""
        :auto-upload="false"
        :multiple="true"
        :http-request="myUploadFile"
        accept=".pdf,.PDF,.doc,.docx,.xls,.xlsx,.ppt,.pptx"
        :file-list="fileList"
        :on-change="onChangeFile"
        :before-remove="beforeRemove"
        :on-remove="onRemoveFile"
      >
        <a href="javascript:;" v-show="showUpFile">
          <i class="el-icon-upload"></i>
          <p>点击上传</p>
        </a>
      </el-upload>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      fileList: [], // // 上传文件列表
      upFile: [], // 文件File 上传参数
      upFileList: [] // 文件File列表 上传参数
    }
  },
  methods: {
    // 选择上传文件
    onChangeFile (file, fileList) {
      const isLt25M = file.size / 1024 / 1024 < 25
      if (!isLt25M) {
        this.$msgbox.alert('上传文件大小不能超过 25MB!')
        return false
      }

      this.upFileList = []
      for (let x of fileList) {
        if (x.raw) {
          this.upFileList.push(x.raw)
        }
      }
    },
    // 移除文件之前
    beforeRemove (file, fileList) {
      return this.$msgbox.alert(`确定移除 ${file.name}？`)
    },
    // 移除文件
    onRemoveFile (file, fileList) {
      this.upFileList = []
      for (let x of fileList) {
        if (x.raw) {
          this.upFileList.push(x.raw)
        }
      }
    },
    // 请求 上传产品文件 接口
    myUploadFile () {
      this.upFile = this.upFileList.shift()

      let uploadForm = new FormData()
      uploadForm.append('uid', this.$store.state.mutations.userId)
      uploadForm.append('token', this.$store.state.mutations.userToken)
      uploadForm.append('file', this.upFile)

      this.$api.pProductFile(uploadForm).then(response => {
        console.log(response)
        if (this.upFileList.length === 0) {
          this.upFile = ''
          return false
        } else {
          this.myUploadFile()
        }
      }).catch(error => {
        console.log(error.response)
        this.$msgbox.alert(error.response.data.message, {
          callback: action => {
            if (error.response.data.message === 'token验证失败') {
              this.$router.push({ path: '/login' })
            }
          }
        })
      })
    }
  }
}
</script>

<style scoped>

</style>

转自https://blog.csdn.net/xjf106/article/details/103050348?utm_medium=distribute.pc_relevant.none-task-blog-title-2&spm=1001.2101.3001.4242