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 = '如果只导入一个收款账户时,收款银行名称和收款账户联行号必填'
}
} 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
}