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)

  }

}

巴特西

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

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

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

html

script

fun

下面是正则验证函数

com-valid.js

最新文章

热门文章