批量上传功能优化，增加长传进度条和上传结果列表
This commit is contained in:
琪
parent
b4ae414413
commit
8945cb1c57
|
|
@ -32,14 +32,21 @@
|
|||
<el-button :loading="loadingDataset">批量导入样品</el-button>
|
||||
</el-upload>
|
||||
<el-upload
|
||||
ref="upload1"
|
||||
class="upload-btn"
|
||||
ref="upload"
|
||||
accept=".txt"
|
||||
action="action"
|
||||
:multiple="true"
|
||||
accept=".txt"
|
||||
:disabled="disabledUpload"
|
||||
:auto-upload="false"
|
||||
:on-change="changeFile"
|
||||
:on-error='fileErr'
|
||||
:on-exceed="handleExceed"
|
||||
:file-list="fileList1"
|
||||
:data="fileData"
|
||||
list-type="picture"
|
||||
:show-file-list="false"
|
||||
:http-request="uploadDiving"
|
||||
:before-upload="beforeUploadDiving"
|
||||
:multiple="true"
|
||||
:limit="1000"
|
||||
>
|
||||
<el-button :loading="loadingDiving">批量导入下潜轨迹</el-button>
|
||||
</el-upload>
|
||||
|
|
@ -55,6 +62,30 @@
|
|||
<line-list v-if="currentValue === 'line'" @edit="handleEdit" />
|
||||
<!--站位数据样品汇交-->
|
||||
<station-list v-if="currentValue === 'station'" @edit="handleEdit" />
|
||||
<!--批量上传弹窗-->
|
||||
<el-dialog
|
||||
title="提示"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<div>
|
||||
<el-button v-if="showPercent" style="margin-left: 10px;" size="small" type="success" @click="submitAbort">取消后续文件上传</el-button>
|
||||
</div>
|
||||
<div style="color:orange;" v-if="showPercent">上传过程请勿刷新浏览器和跳转其他页面...</div>
|
||||
<!-- 进度条 -->
|
||||
<el-progress v-if="showPercent" :percentage="Number((percentNow*100/percentTotal).toFixed(0))"></el-progress>
|
||||
<el-table v-if="resultList.length > 0" :data="resultList">
|
||||
<el-table-column property="name" label="文件名称"></el-table-column>
|
||||
<el-table-column property="startTime" label="上传开始时间"></el-table-column>
|
||||
<el-table-column property="endTime" label="完成时间"></el-table-column>
|
||||
<el-table-column property="result" label="上传结果">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.result ? '上传成功' : '上传失败'}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -91,7 +122,20 @@ export default {
|
|||
loadingDataset: false,
|
||||
textDataset: '批量导入样品',
|
||||
loadingDiving: false,
|
||||
textDiving: '批量导入样品'
|
||||
textDiving: '批量导入样品',
|
||||
fileNum: '',// 单次递归上传的文件
|
||||
upFileList: '',//需要依次上传的待传列表
|
||||
percentTotal: 0,//总上传个数
|
||||
percentNow: 0,//当前上传个数
|
||||
showDesc: '',//结束文案
|
||||
showPercent: false,//显示上传进度条
|
||||
time: null,// change事件是否结束 是否可以直接调手动上传事件（目前设置1.5s）
|
||||
disabledUpload: false,//正在上传中 禁止再次选择文件上传
|
||||
fileData: {
|
||||
},//上传参数
|
||||
fileList1: [],
|
||||
dialogVisible: false,
|
||||
resultList: [],//上传结果列表
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -150,27 +194,172 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
beforeUploadDiving(file) { // 上传文件之前钩子
|
||||
const type = file.name.split('.')[1]
|
||||
if (type !== 'txt') {
|
||||
this.$message({ type: 'error', message: '只支持txt文件格式！' })
|
||||
// beforeUploadDiving(file) { // 上传文件之前钩子
|
||||
// const type = file.name.split('.')[1]
|
||||
// if (type !== 'txt') {
|
||||
// this.$message({ type: 'error', message: '只支持txt文件格式！' })
|
||||
// return false
|
||||
// }
|
||||
// },
|
||||
// uploadDiving(param) {
|
||||
// this.loadingDiving = true
|
||||
// this.textDiving = '数据处理中'
|
||||
// const formData = new FormData()
|
||||
// formData.append('file', param.file)
|
||||
// uploadDiving(formData).then(res => {
|
||||
// if (res.errorCode === 0) {
|
||||
// this.loadingDiving = false
|
||||
// this.textDiving = '批量导入下潜轨迹'
|
||||
// this.$message.success('导入成功！')
|
||||
// this.currentValue = 'list'
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
// 超出限制个数提示
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning('当前限制一次性最多上传1000个文件')
|
||||
},
|
||||
changeFile(file, fileList) {
|
||||
this.disabledUpload = true
|
||||
|
||||
console.log('changeFile', file, fileList)
|
||||
const isLt2M = file.size / 1024 / 1024 < 100
|
||||
if (!isLt2M) {
|
||||
this.$message.warning('上传文件大小不能超过 100M')
|
||||
// return false // 这个return无效 故去掉
|
||||
}
|
||||
|
||||
if (!(file.name.indexOf('.txt') > -1)) {
|
||||
this.$message.warning('当前仅支持txt格式的文件上传')
|
||||
// return false // 这个return无效 故去掉
|
||||
}
|
||||
|
||||
// 符合条件的进入待传列表
|
||||
this.upFileList = []
|
||||
for (let x of fileList) {
|
||||
if (x.raw && (x.name.indexOf('.txt') > -1) && (x.size / 1024 / 1024 < 100)) {// 过滤掉非txt 和小于100M的
|
||||
this.upFileList.push(x.raw)
|
||||
this.percentTotal = this.upFileList.length
|
||||
this.percentNow = 0
|
||||
this.showPercent = false
|
||||
this.showDesc = ''
|
||||
}
|
||||
}
|
||||
|
||||
clearTimeout(this.time)
|
||||
this.time = setTimeout(() => {
|
||||
this.time = null
|
||||
console.log('防抖 高频触发后n秒内只会执行一次 再次触发重新计时')
|
||||
this.fnBegin()//说明此时change了所有文件了 可以上传了
|
||||
this.dialogVisible = true
|
||||
}, 1500)
|
||||
},
|
||||
fnBegin () {
|
||||
console.log('此时change了所有文件 开始上传', this.upFileList)
|
||||
this.submitUpload2()
|
||||
},
|
||||
// 正式上传调后端接口
|
||||
submitUpload2() {
|
||||
if (this.upFileList.length > 0) {
|
||||
this.showPercent = true
|
||||
console.log(this.upFileList)
|
||||
this.fileNum = new FormData() // new formData对象
|
||||
this.fileNum.append('file', this.upFileList[0]) // append增加数据
|
||||
this.fileNum.append('name', this.upFileList[0].name) // append增加数据
|
||||
// 当前上传的文件
|
||||
const currentFile = {}
|
||||
currentFile.name = this.upFileList[0].name
|
||||
currentFile.startTime = this.getCurrentTime()
|
||||
|
||||
uploadDiving(this.fileNum).then(res2 => {
|
||||
// 每次上传当前一个后 不论成功失败就删除当前这个--如果上传失败想继续传当前这个 就把这两行注释掉
|
||||
this.percentNow = this.percentNow + 1
|
||||
this.upFileList.shift()
|
||||
console.log('上传返回', res2)
|
||||
currentFile.endTime = this.getCurrentTime()
|
||||
if (res2.success) {
|
||||
// 记录上传结果
|
||||
currentFile.result = true
|
||||
this.resultList.push(currentFile)
|
||||
// 进行递归 上传下一个
|
||||
this.submitUpload2()
|
||||
} else {
|
||||
// 记录上传结果
|
||||
currentFile.result = false
|
||||
this.resultList.push(currentFile)
|
||||
// 进行递归 上传下一个
|
||||
this.showDesc = '上传结束，部分文件上传失败'
|
||||
this.submitUpload2()
|
||||
}
|
||||
}).catch(error => {
|
||||
// 每次上传当前一个后 不论成功失败就删除当前这个--如果上传失败想继续传当前这个 就把这两行注释掉
|
||||
this.percentNow = this.percentNow + 1
|
||||
this.upFileList.shift()
|
||||
// 记录上传结果
|
||||
currentFile.result = false
|
||||
this.resultList.push(currentFile)
|
||||
// 进行递归 上传下一个
|
||||
this.showDesc = '上传结束，部分文件上传失败'
|
||||
this.submitUpload2()
|
||||
})
|
||||
|
||||
} else {
|
||||
this.disabledUpload = false
|
||||
this.showPercent = false
|
||||
this.upFileList = [] //清空待传列表
|
||||
|
||||
this.$refs.upload1.clearFiles()
|
||||
this.fileList1 = []
|
||||
|
||||
if ((this.percentNow == this.percentTotal) && this.percentTotal) {
|
||||
this.$message.success(this.showDesc ? this.showDesc : '已全部上传成功！')
|
||||
this.percentTotal = 0
|
||||
this.percentNow = 0
|
||||
this.showDesc = ''
|
||||
} else if ((this.percentNow == this.percentTotal) && this.percentTotal == 0) {
|
||||
this.$message.warning('请先选择文件！')
|
||||
this.percentTotal = 0
|
||||
this.percentNow = 0
|
||||
} else {
|
||||
this.$message.success('已部分上传成功，且取消后续文件上传！')
|
||||
this.percentTotal = 0
|
||||
this.percentNow = 0
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
},
|
||||
uploadDiving(param) {
|
||||
this.loadingDiving = true
|
||||
this.textDiving = '数据处理中'
|
||||
const formData = new FormData()
|
||||
formData.append('file', param.file)
|
||||
uploadDiving(formData).then(res => {
|
||||
if (res.errorCode === 0) {
|
||||
this.loadingDiving = false
|
||||
this.textDiving = '批量导入下潜轨迹'
|
||||
this.$message.success('导入成功！')
|
||||
this.currentValue = 'list'
|
||||
}
|
||||
// 终止后续上传
|
||||
submitAbort() {
|
||||
this.showPercent = false
|
||||
// .abort()不生效，故自己直接将this.upFileList置空 那么就不会走到递归了 就制止后续的上传了
|
||||
this.upFileList = []
|
||||
// this.upFileList.forEach(ele => {
|
||||
// this.$refs.upload1.abort(ele)
|
||||
// })
|
||||
// this.$refs.upload1.abort()
|
||||
// this.$message.warning('已取消后续文件上传！')
|
||||
},
|
||||
fileErr(err, file, fileList) {
|
||||
this.$message({
|
||||
message: file.name + '上传失败',
|
||||
type: 'error'
|
||||
})
|
||||
},
|
||||
// 获取当前时间
|
||||
getCurrentTime() {
|
||||
const now = new Date();
|
||||
const hours = now.getHours().toString().padStart(2, '0'); // 使用 padStart 确保小时是两位数
|
||||
const minutes = now.getMinutes().toString().padStart(2, '0'); // 使用 padStart 确保分钟是两位数
|
||||
const seconds = now.getSeconds().toString().padStart(2, '0'); // 使用 padStart 确保秒是两位数
|
||||
const formattedTime = `${hours}:${minutes}:${seconds}`;
|
||||
return formattedTime
|
||||
},
|
||||
// 关闭对话框
|
||||
handleClose() {
|
||||
this.dialogVisible = false
|
||||
this.resultList = []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue