From 8945cb1c57c4de6065005181c95fd4a9d05b72a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=90=AA?= <727393967@qq.com>
Date: Thu, 24 Oct 2024 13:39:36 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=B9=E9=87=8F=E4=B8=8A=E4=BC=A0=E5=8A=9F?=
=?UTF-8?q?=E8=83=BD=E4=BC=98=E5=8C=96=EF=BC=8C=E5=A2=9E=E5=8A=A0=E9=95=BF?=
=?UTF-8?q?=E4=BC=A0=E8=BF=9B=E5=BA=A6=E6=9D=A1=E5=92=8C=E4=B8=8A=E4=BC=A0?=
=?UTF-8?q?=E7=BB=93=E6=9E=9C=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/dataTransfer/sampleDataset.vue | 233 ++++++++++++++++++++---
1 file changed, 211 insertions(+), 22 deletions(-)
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 @@
+
+
+
+ 取消后续文件上传
+
+ 上传过程请勿刷新浏览器和跳转其他页面...
+
+
+
+
+
+
+
+
+ {{ scope.row.result ? '上传成功' : '上传失败'}}
+
+
+
+
@@ -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 = []
+ }
}
}