我这里需求是上传文件前先校验附件是否符合要求,原本使用的是antd的上传组件a-uploud,然后在beforeUpload方法里读取文件,符合要求的附件添加到fileList中。
正常上传的附件格式是这样的:
但是,我这里要读区文件,需要加以下操作,加完读取文件的操作后,上传的附件就会多了error等参数,导致a-uploud组件一直报上传错误
// 我这里对上传的主要是表格数据,只要判断表头是否一样,上传的文件第一栏要是表头
const beforeUpload = (file, val) => {
let fileSize = val.options.rules.fileSize || 50
if (file.size > fileSize * 1024 * 1024) {
$message.error(`文件不能大于${fileSize}M`);
return false;
};
const reader = new FileReader()
reader.onload = e => {
const data = e.target.result
const workbook = XLSX.read(data, {
cellDates: true
})
const firstSheetName = workbook.SheetNames[0]
const worksheet = workbook.Sheets[firstSheetName]
const header = getHeaderRow(worksheet)
const results: any[] = XLSX.utils.sheet_to_json(worksheet, { defval: '' });
const isMatch = header.join() === val.tHeaders.map(x => x.label).join();
if (!isMatch) {
$message.error('上传模版不匹配,无法导入,请基于设计的表格上传模版');
} else {
val.fileList = []
val.fileList.push(file)
}
}
reader.readAsArrayBuffer(file)
return false;
}
const getHeaderRow = (sheet) => {
const headers = []
const range = XLSX.utils.decode_range(sheet['!ref'])
let C
const R = range.s.r
for (C = range.s.c; C <= range.e.c; ++C) {
const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
let hdr = 'UNKNOWN ' + C
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
headers.push(hdr)
}
return headers
}
各种尝试无果后只能手撸上传组件了
template部分:
<div style="display: inline-block">
<input
ref="tableUplad"
class="excel-upload-input"
type="file"
:accept="data.options.accept"
style="display: none;"
@change="e => handleClick(e, data)"
/>
<a-button @click="handleUpload">
<SvgIcon iconClass="fileupload" style="margin-right: 10px;" />
点击上传
</a-button>
</div>
ts部分
// tableUplad是我给上传模版这里设置的ref值,我这里用的是vue3,所以实际操作时要用tableUplad.value操作
const tableUplad = ref(null as any)
const handleUpload = () => {
tableUplad.value.click();
}
const handleClick = (e, val) => {
const files = e.target.files
const rawFile = files[0] // only use files[0]
if (!rawFile) return
upload(rawFile, val)
}
const upload = (rawFile, val) => {
tableUplad.value.value = null // fix can't select the same excel
readerData(rawFile, val)
}
const readerData = (rawFile, val) => {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = e => {
const data = e.target.result
const workbook = XLSX.read(data, {
cellDates: true
})
const firstSheetName = workbook.SheetNames[0]
const worksheet = workbook.Sheets[firstSheetName]
const header = getHeaderRow(worksheet)
const results: any[] = XLSX.utils.sheet_to_json(worksheet, { defval: '' });
const isMatch = header.join() === val.tHeaders.map(x => x.label).join();
if (!isMatch) {
$message.error('上传模版不匹配,无法导入,请基于设计的表格上传模版');
} else {
val.fileList = []
val.fileList.push(rawFile)
}
}
reader.readAsArrayBuffer(rawFile)
})
}
const getHeaderRow = (sheet) => {
const headers = []
const range = XLSX.utils.decode_range(sheet['!ref'])
let C
const R = range.s.r
for (C = range.s.c; C <= range.e.c; ++C) {
const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
let hdr = 'UNKNOWN ' + C
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
headers.push(hdr)
}
return headers
}
OK,主要逻辑就这些了,剩下的就是仿照antd的上传组件添加上传附件列表就搞定了,我就不贴了,总体来说已经满足我的要求了,搞定收工!