批量上传功能优化，增加长传进度条和上传结果列表

src/views/dataTransfer/sampleDataset.vue

@@ -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"
+          :multiple="true"
-          :before-upload="beforeUploadDiving"
+          :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) { // 上传文件之前钩子
+    // beforeUploadDiving(file) { // 上传文件之前钩子
-      const type = file.name.split('.')[1]
+    //   const type = file.name.split('.')[1]
-      if (type !== 'txt') {
+    //   if (type !== 'txt') {
-        this.$message({ type: 'error', message: '只支持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
+    submitAbort() {
-      this.textDiving = '数据处理中'
+      this.showPercent = false
-      const formData = new FormData()
+      // .abort()不生效，故自己直接将this.upFileList置空 那么就不会走到递归了 就制止后续的上传了
-      formData.append('file', param.file)
+      this.upFileList = []
-      uploadDiving(formData).then(res => {
+      // this.upFileList.forEach(ele => {
-        if (res.errorCode === 0) {
+      //   this.$refs.upload1.abort(ele)
-          this.loadingDiving = false
+      // })
-          this.textDiving = '批量导入下潜轨迹'
+      // this.$refs.upload1.abort()
-          this.$message.success('导入成功！')
+      // this.$message.warning('已取消后续文件上传！')
-          this.currentValue = 'list'
+    },
-        }
+    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>