Merge pull request #130 from jamebal/upload

fix: 修复上传大量文件传输进度条卡住的问题

src/api/file-api.js

@@ -16,11 +16,11 @@ export default {
     })
   },
   // 检查文件是否存在
-  checkExist: function (params) {
+  checkExist: function (data) {
     return request({
       url: "checkExist",
       method: "post",
-      params
+      data
     })
   },
   // 上传文件夹

src/components/SimpleUploader/globalUploader.vue

@@ -17,7 +17,7 @@
     >
       <uploader-unsupport></uploader-unsupport>
 
-      <uploader-drop v-if="dragover && enableDragUplaod" class="uploader-drop">
+      <uploader-drop v-if="dragover && enableDragUpload" class="uploader-drop">
         <span>上传文件到当前目录下</span>
       </uploader-drop>
 
@@ -112,7 +112,6 @@
 
 <script>
 
-// import { ACCEPT_CONFIG } from '@/assets/js/config'
 import store from '@/store'
 import $ from 'jquery'
 import SparkMD5 from 'spark-md5'
@@ -133,7 +132,7 @@ export default {
         // speedSmoothingFactor: 0.1,
         // progressCallbacksInterval: 500,
         maxChunkRetries: 3, // 最大重试次数
-        simultaneousUploads: 5, // 并发上传数
+        simultaneousUploads: 3, // 并发上传数
         testChunks: true, // 是否开启服务器分片校验
         // 服务器分片校验函数，秒传及断点续传基础
         checkChunkUploadedByResponse: function (chunk, message) {
@@ -190,7 +189,7 @@ export default {
       fileListScrollTop: 0,
       dragoverLoop: null,
       successMsg: null,
-      enableDragUplaod: false,// 是否启用拖拽上传
+      enableDragUpload: false,// 是否启用拖拽上传
       uploader: null,
     }
   },
@@ -200,7 +199,7 @@ export default {
   watch: {
     $route(route) {
       // 只有首页才启用拖拽上传
-      this.enableDragUplaod = route.path === '/'
+      this.enableDragUpload = route.path === '/'
     },
     message(msg) {
       switch (msg.event) {
@@ -230,16 +229,27 @@ export default {
             $('#folder-uploader-btn').click()
           }
           break
+        case 'request':
+          if (msg.data === 0) {
+            if (this.uploader.fileList.length  === 0 && this.panelShow) {
+              this.fileListLength = this.uploader.fileList.length
+              this.process = 100
+              this.setPageTitle()
+              this.uploader.cancel()
+              this.displayPanel(false)
+            }
+          }
+          break
       }
     }
   },
   mounted() {
-    this.enableDragUplaod = this.$route.path === '/'
+    this.enableDragUpload = this.$route.path === '/'
     let that = this
     let dropbox = document.body
 
     document.body.ondragstart = function (e) {
-      if (that.enableDragUplaod) {
+      if (that.enableDragUpload) {
         if (e.target.slot === 'jmal') {
           that.isDragStart = true
         }
@@ -357,6 +367,9 @@ export default {
         this.doUploadBefore(files)
       }
     },
+    displayPanel(display) {
+      this.panelShow = display
+    },
     doUploadBefore(files) {
       this.fileListLength = this.uploader.fileList.length
       const filePaths = this.uploader.filePaths
@@ -374,15 +387,12 @@ export default {
             currentDirectory: encodeIfNeeded(this.params.currentDirectory),
             username: this.params.username,
             userId: this.params.userId
-          }).then(() => {
-            this.getFileList()
-          }).catch(e => {
           })
         })
       }
       if (window.pc) {
         this.pc = true
-        this.panelShow = true
+        this.displayPanel(true)
       } else {
         this.pc = false
         this.shrink()
@@ -400,6 +410,13 @@ export default {
         this.uploader.resume()
       })
     },
+    setPageTitle() {
+      if (this.process === -10 || this.process === 100 || this.fileListLength === 0) {
+        document.title = `${this.$route.meta.title}`
+      } else {
+        document.title = `${this.process}% | ${this.$route.meta.title}`
+      }
+    },
     onFileProgress(rootFile, file, chunk) {
       this.netSpeed = formatNetSpeed(file.currentSpeed)
       this.process = Math.trunc(window.uploader.progress() * 100)
@@ -490,7 +507,7 @@ export default {
       }
       if (this.process === -10 || this.process === 100 || this.fileListLength === 0) {
         this.uploader.cancel()
-        this.panelShow = false
+        this.displayPanel(false)
       }
     },
     onFileError(rootFile, file, response) {
@@ -641,7 +658,7 @@ export default {
     close() {
       if (this.process === -10 || this.process === 100 || this.fileListLength === 0) {
         this.uploader.cancel()
-        this.panelShow = false
+        this.displayPanel(false)
       } else {
         this.$confirm('还有文件正在上传, 确定要关闭吗？', '提示', {
           confirmButtonText: '确定',
@@ -649,7 +666,7 @@ export default {
           type: 'warning'
         }).then(() => {
           this.uploader.cancel()
-          this.panelShow = false
+          this.displayPanel(false)
         })
       }
     },

src/utils/request.js

@@ -1,5 +1,6 @@
 // import { MessageBox, Message } from 'element-ui'
 import store from '@/store'
+import _ from "lodash";
 import {getShareId, getShareToken, getToken, getUsername} from '@/utils/auth'
 
 // create an axios instance
@@ -12,6 +13,7 @@ const service = axios.create({
 // request interceptor
 service.interceptors.request.use(
   config => {
+    store.dispatch('updateMessage', {event: 'request', data: 1})
     // do something before request is sent
     if (store.getters.token) {
       config.headers['jmal-token'] = getToken()
@@ -31,12 +33,24 @@ service.interceptors.request.use(
   }
 )
 
+const responseErr = _.throttle((error) => {
+  let msg = '哎呀！服务器出错了，请稍后再试！'
+  if (error.response && error.response.status === 403) {
+    msg = '您的请求被服务器拒绝！'
+  }
+  Vue.prototype.$message({
+    message: msg,
+    type: 'error',
+    duration: 5 * 1000
+  })
+}, 3000)
+
 // response interceptor
 service.interceptors.response.use(
   /**
    * If you want to get http information such as headers or status
    * Please return  response => response
-  */
+   */
 
   /**
    * Determine the request status by custom code
@@ -44,6 +58,7 @@ service.interceptors.response.use(
    * You can also judge the status by HTTP Status Code
    */
   response => {
+    store.dispatch('updateMessage', {event: 'request', data: 0})
     const res = response.data
     if (res.code !== 0) {
       if (res.code === -2) {
@@ -56,7 +71,7 @@ service.interceptors.response.use(
         // to re-login
         setTimeout(function () {
           const hasToken = getToken()
-          if(hasToken){
+          if (hasToken) {
             Vue.prototype.$confirm('登录已失效，请重新登录', '确认登出', {
               confirmButtonText: '重新登录',
               cancelButtonText: '取消',
@@ -67,7 +82,7 @@ service.interceptors.response.use(
               })
             })
           }
-        },200)
+        }, 200)
       } else {
         Vue.prototype.$message({
           message: res.message || '服务器开小差了...',
@@ -78,10 +93,10 @@ service.interceptors.response.use(
       return Promise.reject()
     } else {
       let message = ''
-      if(res.message){
+      if (res.message) {
         message = res.message.toString()
       }
-      if(message !== 'true'){
+      if (message !== 'true') {
         Vue.prototype.$message({
           message: res.message,
           type: 'success',
@@ -92,15 +107,7 @@ service.interceptors.response.use(
     }
   },
   error => {
-    let msg = '哎呀！服务器出错了，请稍后再试！'
+    responseErr(error)
-    if (error.response && error.response.status === 403) {
-      msg = '您的请求被服务器拒绝！'
-    }
-    Vue.prototype.$message({
-      message: msg,
-      type: 'error',
-      duration: 5 * 1000
-    })
     return Promise.reject(error)
   }
 )