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

标签：必须   详细步骤   eve   步骤   data   item   als   disabled   sage   

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

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

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

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

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

标签：必须   详细步骤   eve   步骤   data   item   als   disabled   sage   

原文地址：https://www.cnblogs.com/sugartang/p/14845258.html