修改文件上传组件

src/components/SimpleUploader/globalUploader.vue

@@ -5,7 +5,8 @@
     <uploader
       ref="uploader"
       :options="options"
-      :auto-start="false"
+      :file-status-text="statusText"
+      :auto-start="true"
       class="uploader-app"
       @files-added="onFilesAdded"
       @file-success="onFileSuccess"
@@ -67,9 +68,9 @@ export default {
       username: this.$store.state.user.name,
       options: {
         target: api.simpleUploadURL,
-        chunkSize: 2 * 1024 * 1024,
+        chunkSize: 1024 * 1024,
         maxChunkRetries: 1, // 最大重试次数
-        simultaneousUploads: 3, // 并发上传数
+        simultaneousUploads: 1, // 并发上传数
         testChunks: true, // 是否开启服务器分片校验
         // 服务器分片校验函数，秒传及断点续传基础
         checkChunkUploadedByResponse: function(chunk, message) {
@@ -82,6 +83,14 @@ export default {
           // 断点续传
           return (res.resume || []).indexOf(chunk.offset + 1) >= 0
         },
+        parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) {
+          return parsedTimeRemaining
+            .replace(/\syears?/, '年')
+            .replace(/\days?/, '天')
+            .replace(/\shours?/, '小时')
+            .replace(/\sminutes?/, '分钟')
+            .replace(/\sseconds?/, '秒')
+        },
         headers: {
           'jmal-token': $this.$store.state.user.token
         },
@@ -91,6 +100,13 @@ export default {
         // accept: ACCEPT_CONFIG.getAll()
         accept: '*'
       },
+      statusText: {
+        success: '成功了',
+        error: '出错了',
+        uploading: '上传中',
+        paused: '暂停中',
+        waiting: '等待中'
+      },
       panelShow: false, // 选择文件后，展示上传panel
       collapse: false
     }
@@ -115,6 +131,10 @@ export default {
         $('#folder-uploader-btn').click()
       }
     })
+
+    this.$nextTick(() => {
+      window.uploader = this.$refs.uploader.uploader
+    })
   },
   destroyed() {
     Bus.$off('openUploader')
@@ -154,23 +174,29 @@ export default {
         this.panelShow = true
         console.log(pathsLength)
         // this.computeMD5(file)
-        if (pathsLength < 1) {
-          this.computeMD5(file)
-        } else {
-          console.log(pathsLength)
-          Object.assign(this.uploader.opts, {
-            query: {
-              isFolder: false,
-              ...this.params
-            }
-          })
-          file.resume()
-        }
+        // if (pathsLength < 1) {
+        //   // this.computeMD5(file)
+        // } else {
+        //   console.log(pathsLength)
+        //   Object.assign(this.uploader.opts, {
+        //     query: {
+        //       isFolder: false,
+        //       ...this.params
+        //     }
+        //   })
+        //   this.uploader.resume()
+        // }
+        Object.assign(this.uploader.opts, {
+          query: {
+            isFolder: false,
+            ...this.params
+          }
+        })
         Bus.$emit('fileAdded')
       })
     },
     onFileProgress(rootFile, file, chunk) {
-      // console.log(`上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)
+      console.log(`上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)
     },
     onFileSuccess(rootFile, file, response) {
       const res = JSON.parse(response)
@@ -182,6 +208,7 @@ export default {
         this.statusSet(file.id, 'failed')
         return
       } else {
+        console.log(`上传成功 ${file.name}`)
         this.statusSet(file.id, 'success')
       }
       // 如果服务端返回需要合并

src/views/recently/index.vue

@@ -1,45 +1,58 @@
-<!-- 一个上传事例文件 -->
 <template>
-  <div>
-    <el-button @click="upload">上传</el-button>
-  </div>
+  <uploader :options="options" :file-status-text="statusText" class="uploader-example" ref="uploader" @file-complete="fileComplete" @complete="complete"></uploader>
 </template>
 
 <script>
-import Bus from '@/assets/js/bus'
-
-export default {
-  components: {},
-  data() {
-    return {}
-  },
-  computed: {},
-  mounted() {
-    // 文件选择后的回调
-    Bus.$on('fileAdded', () => {
-      console.log('文件已选择')
-    })
-
-    // 文件上传成功的回调
-    Bus.$on('fileSuccess', () => {
-      console.log('文件上传成功')
-    })
-  },
-  destroyed() {
-    Bus.$off('fileAdded')
-    Bus.$off('fileSuccess')
-  },
-  methods: {
-    upload() {
-      // 打开文件选择框
-      Bus.$emit('openUploader', {
-        id: '1111' // 传入的参数
+  export default {
+    data () {
+      return {
+        options: {
+          target: '//localhost:3000/upload', // '//jsonplaceholder.typicode.com/posts/',
+          testChunks: false
+        },
+        attrs: {
+          accept: 'image/*'
+        },
+        statusText: {
+          success: '成功了',
+          error: '出错了',
+          uploading: '上传中',
+          paused: '暂停中',
+          waiting: '等待中'
+        }
+      }
+    },
+    methods: {
+      complete () {
+        console.log('complete', arguments)
+      },
+      fileComplete () {
+        console.log('file complete', arguments)
+      }
+    },
+    mounted () {
+      this.$nextTick(() => {
+        window.uploader = this.$refs.uploader.uploader
       })
     }
   }
-}
 </script>
 
-<style scoped lang="scss">
-
+<style>
+  .uploader-example {
+    width: 880px;
+    padding: 15px;
+    margin: 40px auto 0;
+    font-size: 12px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
+  }
+  .uploader-example .uploader-btn {
+    margin-right: 4px;
+  }
+  .uploader-example .uploader-list {
+    max-height: 440px;
+    overflow: auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
 </style>