监听 change 事件,当上传文件后触发事件, 文件的类型为 file ,上传文件的格式为 .xlsx
格式可以添加多个,例如:.xlsx .xls
<input
ref="excel-upload-input"
class="excel-upload-input"
type="file"
accept=".xlsx"
@change="hChangeFile"
>
在 methods 中开始处理
// 选中文件框中的某个文件, change 事件
async hChangeFile(e) {
// 事件对象 e 会自动收集当前用户选中的文件,一定要加上索引才可以
const file = e.target.files[0]
console.log('e.target.files[0]', file)
try {
// 判断 有选中的文件,不为空 的情况下执行
if (file) {
// 准备上传的文件参数
const fd = new FormData()
fd.append('file', file)
// 调用接口,上传文件
await uploadExcel(fd)
// 提醒用户
this.$message.success('上传成功')
// 关闭当前弹窗
this.$emit('update:show-excel-dialog', false)
// 刷新
this.$emit('loadEpartment')
}
} finally {
// 重置 input 的value 的值,下次选中同一个文件时也能触发 change
this.$refs['excel-upload-input'].value = ''
}
}