1、vue文件html部分
<a-button class="button" @click="handleExport">列表导出</a-button>
<a-upload :before-upload="handleBeforeUpload" :custom-request="handleCustomRequest">
<a-button class="button" style="margin: 0 10px">批量导入</a-button>
</a-upload>
2、methods部分
//导出
handleExport() {
console.log('tenantId', this.queryParam.tenantId)
postAction(
'/epcp/vehicle/export?tenantId=' + this.queryParam.tenantId + '&workType=' + this.queryParam.workType
).then(res => {
if (res.success) {
window.location.href = res.message
this.$message.success(res.message)
} else {
this.$message.error(res.message)
}
})
},
//导入
handleBeforeUpload(file) {
// 在上传前的操作,例如验证文件类型或大小
// 如果文件验证不通过,返回 false 可以阻止上传
console.log('before upload:', file)
},
handleCustomRequest(options) {
// 自定义请求,通过后台接口上传文件
const formData = new FormData()
formData.append('file', options.file)
formData.append('tenantId', this.queryParam.tenantId)
postAction('/epcp/vehicle/import', formData)
.then(response => {
debugger
if (response.result.total == response.result.success) {
// 全部成功
// 上传成功的处理
console.log('upload success:', response.data)
this.$message.success('上传成功')
this.loadData(1)
} else {
this.loadData(1)
// this.$message.error('失败:', JSON.stringify(response.result.failedRows))
this.$message.open({
content: JSON.stringify(response.result.failedRows),
duration: 4 // 显示时长,单位为秒
})
}
})
.catch(error => {
// 上传失败的处理
console.log('upload error:', error)
this.$message.error('上传失败')
})
},