VUE上傳表格文件發送后端，后端解析以及上傳文件，前端進行解析的實現方法

首先來說前端上傳表格，然后利用純前端技術進行解析表格的辦法

詳細步驟----請點擊這里

接下來來說上傳發送給后端的代碼實現

html

<input ref="myInput" type="file" class="my_input" :multiple="myMultiple" style="display:none;" @change="importExcel">
<el-button type="primary" style="width:150px;" :disabled="item.updisabled" size="small" @click="myOpen()">上傳</el-button>

script

import myComValid from '../co-assets/com-valid.js'
import myCom from '../co-assets/com-fun' // 這里只有個彈框函數，就不放了
import Request from '../co-assets/request.js' // 這個是請求函數，和其他的AXIOS一樣,只不過稍微封裝了一下下，可以改為原來的axios請求方式

// 數據
myMultiple: true

fun

    // 方法
    myOpen() {
      setTimeout(() => {
        this.$refs.myInput.click()
      }, 500)
    }
    /**
     * 導入
     */
    async importExcel(e) {
      // console.log('上傳了')
      this.formData[this.currentFlag]['fileName'] = '正在上傳,請稍后...'
      this.loading = true
      this.loadingTest = '正在上傳文件,請稍后...'
      const files = e.target.files
      if (files.length <= 0) {
        return false
      } else if (files.length > 2) {
        myCom.alert('上傳數量有誤(正確數量為1-2個)，請重新選擇文件！')
        this.loading = false
        return false
      } else {
        Object.values(files).every(_ => {
          // 循環檢查所有文件是否都是xlsx
          if (!/\.(xlsx)$/.test(_.name.toLowerCase()) || myComValid.validNoTest(_.name)) {
            myCom.alert('請重新上傳，文件必須為xlsx格式且文件名不可包含漢字！')
            this.loading = false
            return false
          }
        })
      }
      const url = myUrl +'/uploadfile' 
      const myformdataFile = new FormData()
      if (e.target.files.length > 1) {
        myformdataFile.append('file', e.target.files[0])
        myformdataFile.append('file', e.target.files[1])
      } else {
        myformdataFile.append('file', e.target.files[0])
      }
      if (this.currentFlag === 'header') {
        myformdataFile.append('files', this.filename)
      }
      myformdataFile.append('actiontime', this.topForm.version.value)
      try {
        const res = await Request.httpRes(
          'post',
          url,
          myformdataFile,
          false,
          'Success!',
          '上傳文件失敗，請重新上傳！'
        )
        if (res && res.status === 'Success') {
          res.msg && this.$message.success(res.msg)
        } else {
          res.msg && this.$message.error(res.msg)
          this.setErrorUpload(res)
        }
      } catch (err) {
        this.$message.error('執行操作失敗，請重試！')
        this.setErrorUpload()
      }
      var input = this.$refs.myInput
      input.value = ''
    },
    // 導入

下面是正則驗證函數

com-valid.js

export default {
  /**
   * 驗證IP
   * @param {String} ip
   */
  validIp(ip) {
    const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
    return reg.test(ip)
  },
  /**
   * 檢測是否包含文字
   * @param {String} str
   */
  validNoTest(str) {
    const reg = /[\u4e00-\u9fa5]+/g
    return reg.test(str)
  },
  /**
   * 檢測是否包含文字或者空格
   * @param {String} str
   */
  validNoTest1(str) {
    const reg = /[\u4e00-\u9fa5\s]+/g
    return reg.test(str)
  }
}