做项目时遇到上传excel文件到后台，项目使用的是elementUI组件，直接使用element的Upload上传，但是需求是需要用户选择完文件，并且输入文件描述，然后一起上传到后台，类似于form表单提交

（1）.vue html 

<div class="user-search-body">
          <el-form inline
                   :model="form"
                   label-width="80px">
            <el-form-item label="版本号:"
                          style="text-align:left">
              <el-input placeholder="请输入版本号"
                        v-model="form.versionCode"
                        clearable
                        style="width:200px;">
              </el-input>
            </el-form-item>
            <el-form-item label="版本描述:"
                          class="describelabel">
              <el-input placeholder="请输入描述内容"
                        v-model="form.descript"
                        clearable>
              </el-input>
            </el-form-item>
            <!-- 上传文件 -->
            <el-upload class="upload-box"
                       action=""//默认自动上传是的url 可以为空，但必填，否则会报错
                       accept=".xls,.xlsx"
                       :limit='1'
                       :before-remove="beforeRemove"
                       :file-list="fileList"
                       :on-change="changeFile"
                       :on-exceed="handleExceed"
                       :auto-upload="false" //false 阻止其自动上传>
              <el-button slot="trigger"
                         size="small"
                         type="primary">上传车型库</el-button>
              <div slot="tip"
                   class="el-upload__tip">请选择xls/xlsx文件上传</div>
            </el-upload>
            <!-- 上传文件 end -->
          </el-form>
          <div class="submit-edit">
            <el-button size="medium"
                       @click.native.prevent="cancel">取消</el-button>

            <el-button class="sub-btn"
                       size="medium"
                       type="primary"
                       @click.native.prevent="submitFiles">提交</el-button>
          </div>
        </div>

（2）js

export default {
  data () {
    return {
      fileList: [], // 文件临时存放列表
      form: {
        versionCode: '',
        descript: '',
        file: '' // file文件
      }

    }
  },
  mounted () {
    if (this.$route.matched[this.$route.matched.length - 1].name === 'appcartsedit') {
      this.$store.commit('setAppCartsEditOff', false)
    }
  },
  watch: {

  },
  methods: {
    submitFiles () {
      var that = this
//将需要提交的文件，和附带的数据，append  FormData中 然后提交
      var formData = new FormData()
      let bToken = localStorage.getItem('btoken')
      formData.append('file', this.form.file)
      formData.append('versionCode', this.form.versionCode)
      formData.append('descript', this.form.descript)
      formData.append('vwToken', bToken)
      that.sendFile(formData)
    },
    sendFile (data) {
      const loading = this.$loading({
        lock: true,
        text: '文件上传中请稍等...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.$post('/b/carModel/createCarModelVersion', data).then(req => {
        console.log(req)
        loading.close()
        if (req.code === 10000) {
          this.$message({
            showClose: true,
            message: '上传成功',
            type: 'success'
          })
          this.formReset()// 上传成功清空
          this.$router.push({ name: 'appcartsconfig' })
        }
      }).catch(err => {
        console.log(err)
      })
    },

    changeFile (file, fileList) {
      console.log('change', file, file.raw)
      this.form.file = file.raw
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    formReset () { // 重置
      this.form = {
        versionCode: '',
        descript: '',
        file: '' // file文件
      }
    }

  }
}

（3）在发送post请求时，由于项目中写了拦截器和全局配置，所以需要针对上传文件接口单独配置请求头和数据整理(qs)，

上传文件的formdata不要使用Qs.stringify(config.data)整理，否则后台拿不到文件数据，具体配置请看 vue axios封装http拦截和公用请求

 config.headers = {
        'Content-Type': 'multipart/form-data'
      }

（4）后面就是需要后台支持了，让他们用MultipartFile接收就行