zoukankan      html  css  js  c++  java
  • VUE上传表格文件发送后端,后端解析以及上传文件,前端进行解析的实现方法

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

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

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

    html

    
    <input ref="myInput" type="file" class="my_input" :multiple="myMultiple" style="display:none;" @change="importExcel">
    <el-button type="primary" style="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}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|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-u9fa5s]+/g
        return reg.test(str)
      }
    }
    
    
    
  • 相关阅读:
    Linux 下的类似Windows下Everything的搜索工具
    windows和linux环境下制作U盘启动盘
    程序调试手段之gdb, vxworks shell
    LeetCode 1021. Remove Outermost Parentheses (删除最外层的括号)
    LeetCode 1047. Remove All Adjacent Duplicates In String (删除字符串中的所有相邻重复项)
    LeetCode 844. Backspace String Compare (比较含退格的字符串)
    LeetCode 860. Lemonade Change (柠檬水找零)
    LeetCode 1221. Split a String in Balanced Strings (分割平衡字符串)
    LeetCode 1046. Last Stone Weight (最后一块石头的重量 )
    LeetCode 746. Min Cost Climbing Stairs (使用最小花费爬楼梯)
  • 原文地址:https://www.cnblogs.com/sugartang/p/14845258.html
Copyright © 2011-2022 走看看