diff --git a/src/views/dataTransfer/sampleDataset.vue b/src/views/dataTransfer/sampleDataset.vue index 7ba7542..99121b1 100644 --- a/src/views/dataTransfer/sampleDataset.vue +++ b/src/views/dataTransfer/sampleDataset.vue @@ -32,14 +32,21 @@ 批量导入样品 批量导入下潜轨迹 @@ -55,6 +62,30 @@ + + +
+ 取消后续文件上传 +
+
上传过程请勿刷新浏览器和跳转其他页面...
+ + + + + + + + + + +
@@ -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 = [] + } } }