VUE上传表格文件发送后端，后端解析以及上传文件，前端进行解析的实现方法

Posted 2021-06-03 糖~豆豆

首先来说前端上传表格，然后利用纯前端技术进行解析表格的办法

详细步骤----请点击这里

接下来来说上传发送给后端的代码实现

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)
  }
}