excel上傳前端取值

<upload-file
      v-model="fileList"
      :limit="1"
      :before-upload="beforeUpload"
      drag
      list-position="bottom"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
    </upload-file>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit">確 定</el-button>
    </span>

    beforeUpload(file) {
      const isXls = file.name.toLocaleLowerCase().includes('.xls') || file.name.toLocaleLowerCase().includes('.xlsx')
      if (!isXls) {
        this.$message.error('僅支持xls文件!')
      }
      const reader = new FileReader()
      reader.onload = e => {
        const data = e.target.result
        const excelData = XLSX.read(data, { type: 'array' })
        this.result = []
        const sheet2JSONOpts = {
          /** Default value for null/undefined values */
          defval: ''// 給defval賦值為空的字符串
        }
        excelData.SheetNames.forEach((sheetName) => {
          this.result.push({
            sheetName: sheetName,
            sheet: XLSX.utils.sheet_to_json(excelData.Sheets[sheetName], sheet2JSONOpts)
          })
        })
      }
      reader.readAsArrayBuffer(file)
      return isXls
    },
    handleSubmit() {
      if (!this.result.length) {
        this.$message.warning('請上傳文件')
        return
      }
      if (this.checkData(this.result[0])) {
        const validData = this.result[0]
        console.log(validData.sheet.slice(2), 'valiData')
        this.$emit('sure', validData.sheet.slice(2).map(v => {
          const [accountOfPayee, accountNoOfPayee, nameOfPayeeBank, jointBanknoOfPayee, amountCollected] = Object.keys(v)
          // const [accountOfPayee, accountNoOfPayee, nameOfPayeeBank, jointBanknoOfPayee, amountCollected] = Object.values(v)
          // Object.values會自動排序問題
          return ({
            'otherAccountName': v[accountOfPayee] || '',
            'bankName': v[nameOfPayeeBank] || '',
            'transferFlowNo': v[accountNoOfPayee] || '',
            'remarks': v[jointBanknoOfPayee] || '',
            'transferSum': (parseFloat(v[amountCollected] || 0)).toFixed(2) || ''
          })
        }))
      }
      // this.loading = false
    },
    checkData(excelData) { // 非空校驗
      const uploadData = excelData.sheet.slice(2)
      const flag = this.flag
      let valid // :boolean
      let message = '表格必填內容缺失，請重新上傳'
      console.log(flag)
      // const valid = excelData.sheet.slice(2).every(v => Object.values(v).length === 6 || (Object.values(v)[0] === '行內' && Object.values(v)[1] && Object.values(v)[2] && Object.values(v)[5] && (Object.values(v).length === 4 || Object.values(v).length === 5)))
      if (flag === 1) {
        valid = uploadData.every(v => (Object.values(v)[0]) && Object.values(v)[4])
        if (uploadData.length === 1) {
          valid = uploadData.every(v => (Object.values(v)[0]) && Object.values(v)[1] && Object.values(v)[2] && Object.values(v)[3] && Object.values(v)[4])
          message = '如果只導入一個收款賬戶時，收款銀行名稱和收款賬戶聯(lián)行號必填'
        }
      } else if (flag === 0) {
        valid = uploadData.every(v => (Object.values(v)[0]) && Object.values(v)[1] && Object.values(v)[2] && Object.values(v)[3] && Object.values(v)[4])
      }
      if (!valid) {
        this.$message.error(message)
        this.result = []
        this.fileList = []
        return false
      }
      return true
    }