vue+element_ui上傳文件，並傳遞額外參數

需求：

1. 文件大小驗證
2. 文件類型驗證
3. 額外參數傳輸\

<template>
 <el-upload class="upload-demo" action :limit="1" 
        :file-list="formFileList" 
        :http-request="handleUploadForm" 
        :on-exceed="formHandleExceed" 
        :on-remove="formHandleRemove"
        :before-upload="beforeUploadForm" accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
        <el-button type="primary">上傳文件</el-button>
        <span slot="tip" class="el-upload__tip" style="margin: 0 10px;">只能上傳xlsx/xls/csv文件，且不超過{{formMaxSize}}M</span>
    </el-upload>
</template>
<script>
export default {
 data () {
  return {
   formMaxSize: 10, // 上傳文件大小
   formFileList: [], // 顯示上傳文件
   uploadFormFileList: [] // 確定上傳文件
  }
 },
 methods: {
  // 開始上傳前驗證
  beforeUploadForm (file) {
   // 驗證文件大小
   if (file.size / 1024 / 1024 > this.formMaxSize) {
    this.$message({
     message: `上傳文件大小不能超過${this.formMaxSize}M!`,
     type: 'warning'
    })
    return false
   }
   // 中文亂碼處理
   if (file.raw) {
    let reader = new FileReader() // 讀取文件內容
    reader.readAsText(file.raw, 'gb2312') // 防止中文亂碼問題，不加reader.onload方法都不會觸發
    reader.onload = function (e) {
     this.contentHtml = e.target.result // txt文本內容，接下來就可以對其進行校驗處理了
    }
   }
   // 驗證文件類型
   var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
   const extension = testmsg === 'xlsx' || testmsg === 'xls' || testmsg === 'csv'
   if (!extension) {
    this.$message({
     message: '上傳文件只能是xlsx/xls/csv格式!',
     type: 'warning'
    })
   }
   return extension
  },
  // 移除上傳列表中文件
  formHandleRemove (file, formFileList) {
   let thiz = this
   for (let i = 0; i < thiz.uploadFormFileList.length; i++) {
    if (thiz.uploadFormFileList[i].pname === file.name) {
     thiz.uploadFormFileList.splice(i, 1)
     break
    }
   }
  },
  // 允許上傳文件個數驗證
  formHandleExceed (files, formFileList) {
   this.$message.warning(`當前限制選擇 1 個文件，本次選擇了 ${files.length} 個文件，共選擇了 ${files.length + formFileList.length} 個文件`)
  },
  // 上傳文件
  handleUploadForm (param) {
   let thiz = this
   let formData = new FormData()
   formData.append('uid', '上傳文件編號') // 額外參數
   formData.append('files', param.file)
   let loading = thiz.$loading({
    lock: true,
    text: '上傳中，請稍候...',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
   })
   thiz.$axios.post('http://localhost:8080/upload/file', formData).then(({data}) => {
    if (data.statusCode === 233) {
     thiz.$message('上傳文件成功，' + data.message)
     thiz.formFileList = []
     thiz.uploadFormFileList = []
    } else {
     thiz.formFileList = []
     thiz.uploadFormFileList = []
     thiz.$message('上傳文件失敗，' + data.message)
    }
    loading.close()
   })
  }
 }
}
</script>
<style lang="scss" scoped>
</style>

總結：

關於el-upload中各屬性的配置，可以看element_ui官網
後端接受上傳文件和額外參數：
 

@RequestParam(value = "uid") String uid, @RequestParam(value = "files") MultipartFile[] files