ローカル検証
インターフェースの検証
HTML
<el-dialog
title="导入医院信息"
:visible.sync="uploadVisible"
width="420px"
:before-close="handleCloseUpload"
:close-on-click-modal="false"
>
<div
v-loading="uploadloading"
class="upload-container">
<el-upload
ref="upload"
class="upload_demo"
drag
name="fileame"
:http-request="uploadMehod"
:file-list="fileList"
:on-exceed="handleExceed"
:limit="1"
:on-change="fileChange"
:before-remove="deleteFile"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
<br />支持扩展名: .xlsx
</div>
</el-upload>
</div>
<span
slot="footer"
class="dialog-footer">
<el-button @click="handleCloseUpload">取 消</el-button>
<el-button
type="primary"
@click="uploadFile">确 定</el-button>
</span>
</el-dialog>
js
data
upfile: null,
uploadState: false,
fileList: [], // 文件,
isAddFileStatus: '', // 文件状态
exportMsg:'',
// 步骤1： 删除文件
deleteFile() {
// console.log('delete')
this.fileList = []
this.uploadState = false
},
// 步骤1： 文件类型判断
checkFile(file) {
this.exportMsg = ''
const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
// console.log(fileSuffix)
if (fileSuffix !== 'xlsx' && fileSuffix !== 'xls') {
this.$message({
message: '文件类型选择错误!',
type: 'error'
})
this.uploadloading = false
return false
} else {
return true
}
},
// 步骤1： 选择文件
fileChange(file) {
console.log(file, 'file')
if (!this.isAddFileStatus) {
// console.log(111)
this.fileList[0] = file
const isJsonTxt = this.checkFile(file)
if (!isJsonTxt) {
return (this.fileList = [])
}
if (file.size > 1048576) {
this.$message.info('文件超过1M!')
return (this.fileList = [])
}
} else {
this.isAddFileStatus = ''
this.deleteFile()
}
},
// 文件超出限制
handleExceed(files, fileList) {
console.log(files, fileList)
// 选择两个文件
if (files.length >= 2) {
this.$message.error('当前限制选择 1 个文件,请重试！')
} else {
files[0].status = 'ready' // 修改文件状态
const isJsonTxt = this.checkFile(files[0])
if (!isJsonTxt) {
return
}
if (files[0].size > 1048576) {
this.$message.info('文件超过1M!')
} else {
this.fileList = []
this.fileList[0] = files[0]
this.uploadState = false
}
}
},
uploadMehod(params) {
this.upfile = params.file
this.uploadState = false
},
uploadFile() {
this.uploadloading=true
const formdata = new FormData()
formdata.append('file', this.fileList[0].raw ? this.fileList[0].raw : this.fileList[0])
isExistData({
file:formdata}).then(res=>{
if(res.code===200){
console.log(res.data)
if(res.data.isExist){
let arr = res.data.existData.map(item=>item.name)
this.uploadloading=false
this.$confirm(`${
String(arr)}信息已存在, 是否覆盖导入?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.importHospital(formdata)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消导入'
});
});
}else{
this.importHospital(formdata)
}
}else{
this.uploadloading=false
this.$message.error(res.message)
}
})
},
importHospital(formdata){
this.uploadloading=true
importHospital({
file:formdata}).then((res) => {
if(res.code===200){
this.uploadloading=false
this.handleCloseUpload();
this.initTableData();
this.$message({
type: 'success',
message: '导入成功!'
});
}else{
this.uploadloading=false
this.$message.error(res.message)
}
})
},