From fe2fea7536a20a5f901923ccd4c29ef4314c9174 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Sun, 26 Apr 2020 17:32:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=8B=96=E6=8B=BD=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/img/moveFile.png                   |  Bin 0 -> 1210 bytes
 src/components/ShowFile/ShowFile.vue          |   38 +-
 .../SimpleUploader/globalUploader.vue         | 1468 +++++++++--------
 src/views/test/图片上加文字.html              |   29 +
 src/views/test/拖拽.html                      |   53 +
 5 files changed, 842 insertions(+), 746 deletions(-)
 create mode 100644 src/assets/img/moveFile.png
 create mode 100644 src/views/test/图片上加文字.html
 create mode 100644 src/views/test/拖拽.html

diff --git a/src/assets/img/moveFile.png b/src/assets/img/moveFile.png
new file mode 100644
index 0000000000000000000000000000000000000000..4f53bf86c73435d3f87a5d7439f5976a17a1dddf
GIT binary patch
literal 1210
zcmV;r1V#IaP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F8000DmNkl<ZSV!%a
zTWDNG7{~wLoY_5%k+fB8n*>6QwiQb2rD9{Kmta9G^r19}m(o%ZeW;c~jW3~C1r69j
zD7Jl4^g(2UU|xLkB@uchEoe)UqSaiQY&3)>!N%-nzcZiAoZakh_Jp!Vs1H4``<*jq
z=FD&Y-(`kyhcCLr^W!eSyaMTSTR#P;r3{x`hLSh@hKpCq7*o=99$@ZVLze*0m-(@q
ze&dDv%N$eGeW?I20h%hFxzPP@A^txAGIrt*5UqwtKOhQ95sa*laM}>WW{&`5`2`Rm
zcW>KC2tu`sDndxmnnSPV-p?x_W5=f;v^@MUk}v{zN)QM^*-5CT*m;tK?P&*?+#3fa
zS)hXck{>FRpxTxQfMnYg1R;RCC<!ST=$h<w7RXwv2FVx<IX&{jL_#Hyv&G;*f@)hM
z07gEX1hArLmEu-ea9N<NXktRyiK<<PlD=6ea%1ukLLF3h^p#Q<47W~!tP7$p8HG3}
z7pzu761UncL=me=hH;Tqk>(*1RQE}Q0z)m+097rXPLc#Efm?YPhVJ7QEOfy_sSB0M
zDOm$Sg4Q0702n-U8vv`MNg})OFxX691(o$VP<>|nF>G7)(;{M`gC0B);evq!(*UX<
zNJ7~_S|pVSqhZ9^;FEj?ST#t=7uR>K7@DcB`smS9(Ex;#wD$D75i#)AL*N)A7BDhC
zBhHL;hEZ9?n4JhPILOr0&0)M*8Q#_ysnke~$1t}{pB&v&fA-I(+UJbk=BxC@ZyFEp
zg<%cP(+C0$PiYvVA(*0dU-p#({PyO47-1;GFp8m(aW?m?gkcOrsjT%FCKCX0d~o%h
z?Y-0M+XUp>4_A1po|XP|51=5zWG#u1qClmBWvPkO%E|BcR~*e{b{NdpU!MSI;l?tY
zO|dZ0Tn-vr>1_VlXZ7`P^P0|)9gD|q#2X>%?%W%1DhBxFwPyj721y2iVt9(d%<w!$
zCKFm6W294zc$|;?{NC#RzaRNZL^YN*yQ^W50K2*Xir$Wi+98HP#1L>|q<O=)H+H{V
z?!>wNivaBGg535z&<-I68UFoN{XNHiZP_)RUR75vNHjq2i}%474Hk_+G-B5J8b&lc
z39XhG03Qq=1Ro&3wXbd8wObo^mIDzD(7!$0j1=7ncQ;$*T-e$F;#Cp`U|cmcfS4aA
zUby%4(7|dpF&CNZDzD8vzWj1!6x6^>{SQ5pThEtf!IkHph6kIc;ZH5Fg>6Om#`W$0
zYx4uA1`h8YOV`%d_@hIgZQj=bq4!H5jA^1xXXZ~(OFovn)5E1L8gp?Cqx7D^?>}av
zw<Mn2(TpIaVMrrJ8Ubkt*@84p8_$O6o!?slx!Q0Lq->?jfWYo&3scFxEl4_Sx5X*2
zeQf~)gN5M<xAcAf(y<K(I_*7TV9W|5E{vOosqy@5p(^<kQSTEE&r@1zP1==GOYJKU
z#=69=BG6FQ=ANy)Y>Cab0UAUaaAh}ax9%kJAaVpi6K%Tm-?^Zi=#T2V<QTXMuv7*9
Y0kH}vKh;v_VgLXD07*qoM6N<$g6R1-N&o-=

literal 0
HcmV?d00001

diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index 89f4009..f70658b 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -942,13 +942,17 @@
         let gridItemChildenClassName = 'grid-time van-grid-item__content van-grid-item__content--center van-grid-item__content--square'
 
         // 目标元素
-        let target = document.querySelector('.el-table__body-wrapper tbody');
+        let target = document.querySelector('.el-table__body-wrapper tbody')
 
         if(this.grid){
           target = document.querySelector('.van-checkbox-group .van-grid')
         }
 
         let rows = 0;//行数
+
+        let img = new Image();
+        img.src = require('@/assets/img/File.png')
+
         setTimeout(function () {
           rows = target.childElementCount
           _this.dragElementList = []
@@ -969,8 +973,15 @@
 
             // 使元素可拖动
             child.draggable = true
+            // 使元素可拖动
+            child.slot = 'jmal'
 
             child.ondragstart = function(e){
+              // img.src = require('@/assets/img/File.png')
+
+              e.dataTransfer.setDragImage(img, 0, 0);
+
+              Bus.$emit('onDragStart', true)
               // 避免和画矩形选取冲突
               _this.drawFlag = false
               let rectangle = document.getElementById('rectangle1')
@@ -986,12 +997,9 @@
               dragged.style.cursor = 'grabbing'
               dragged.style.borderRadius = '10px'
               dragBackCorlor = dragged.style.backgroundColor
-
-              let dragImage = document.createElement('img')
-              dragImage.src = require('@/assets/img/File.png')
-              e.dataTransfer.setDragImage(dragImage, 10, 10);
             }
             child.ondragend = function(){
+              Bus.$emit('onDragStart', false)
               // console.log('child'+i+'拖拽结束');
               // 清除上次进入的容器的状态
               const last = target.children[dragIndex];
@@ -1076,13 +1084,7 @@
                 // 改变本次进入的容器的状态
                 dragged.style.cursor = 'copy'
                 dragEnterBackCorlor = throughRow.style.backgroundColor
-                // throughRow.style.backgroundColor = '#e9fdcf'
-                if(_this.grid){
-                  throughRow.style.height = throughRow.clientWidth + 15 +'px'
-                  throughRow.style.width = throughRow.clientWidth + 15 +'px'
-                }else{
-                  throughRow.style.height = 60+'px'
-                }
+                throughRow.style.backgroundColor = '#9fcdfc99'
               }
               dragIndex = throughRow.rowIndex
             }
@@ -1141,13 +1143,17 @@
           if(node){
             if(_this.grid){
               node = node.children[0].children[0]
-              node.style.height = null
-              node.style.width = null
-              // node.style.backgroundColor = dragEnterBackCorlor
-              dragged.style.cursor = 'grabbing'
+              if(node.style.backgroundColor !== 'rgba(202, 234, 249, 0.57)'){
+                node.style.backgroundColor = null
+              }
             }else{
               node.style.height = 'unset'
+              //#F5F7FA
+              if(node.style.backgroundColor !== 'rgb(245, 247, 250)'){
+                node.style.backgroundColor = null
+              }
             }
+            dragged.style.cursor = 'grabbing'
           }
           dragged.style.backgroundColor = dragBackCorlor
         }
diff --git a/src/components/SimpleUploader/globalUploader.vue b/src/components/SimpleUploader/globalUploader.vue
index b5cdab1..7971e05 100755
--- a/src/components/SimpleUploader/globalUploader.vue
+++ b/src/components/SimpleUploader/globalUploader.vue
@@ -33,7 +33,7 @@
                 <i class="iconfont el-icon-position"></i>
               </el-button>
               <!--<el-button type="text" class="button-collapse" :title="collapse ? '展开':'折叠' " @click="fileListShow">-->
-                <!--<i class="iconfont" :class="collapse ? 'el-icon-circle-plus-outline': 'el-icon-remove-outline'"></i>-->
+              <!--<i class="iconfont" :class="collapse ? 'el-icon-circle-plus-outline': 'el-icon-remove-outline'"></i>-->
               <!--</el-button>-->
               <el-button type="text" class="button-collapse" title="关闭" @click="close">
                 <i class="iconfont el-icon-circle-close"></i>
@@ -77,785 +77,793 @@
 </template>
 
 <script>
-/**
-     *   全局上传插件
-     *   调用方法：Bus.$emit('openUploader', {}) 打开文件选择框，参数为需要传递的额外参数
-     *   监听函数：Bus.$on('fileAdded', fn); 文件选择后的回调
-     *            Bus.$on('fileSuccess', fn); 文件上传成功的回调
-     */
+  /**
+   *   全局上传插件
+   *   调用方法：Bus.$emit('openUploader', {}) 打开文件选择框，参数为需要传递的额外参数
+   *   监听函数：Bus.$on('fileAdded', fn); 文件选择后的回调
+   *            Bus.$on('fileSuccess', fn); 文件上传成功的回调
+   */
 
-// import { ACCEPT_CONFIG } from '@/assets/js/config'
-import Bus from '@/assets/js/bus'
-import $ from 'jquery'
-import SparkMD5 from 'spark-md5'
-import api from '@/api/file-api'
-import { formatNetSpeed } from '@/utils/number'
+  // import { ACCEPT_CONFIG } from '@/assets/js/config'
+  import Bus from '@/assets/js/bus'
+  import $ from 'jquery'
+  import SparkMD5 from 'spark-md5'
+  import api from '@/api/file-api'
+  import { formatNetSpeed } from '@/utils/number'
 
-export default {
-  components: {},
-  data($this) {
-    return {
-      username: this.$store.state.user.name,
-      options: {
-        target: api.simpleUploadURL,
-        chunkSize: 2 * 1024 * 1024,
-        // speedSmoothingFactor: 0.1,
-        // progressCallbacksInterval: 500,
-        maxChunkRetries: 1, // 最大重试次数
-        simultaneousUploads: 3, // 并发上传数
-        testChunks: true, // 是否开启服务器分片校验
-        // 服务器分片校验函数，秒传及断点续传基础
-        checkChunkUploadedByResponse: function(chunk, message) {
-          const objMessage = JSON.parse(message)
-          const res = objMessage.data
-          if(!res){
-            return []
-          }
-          if (res.pass) {
-            // 秒传
-            return true
-          }
-          // 断点续传
-          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
-        },
-        query() {}
-      },
-      attrs: {
-        accept: '*'
-      },
-      statusText: {
-        success: '上传成功',
-        error: '上传失败',
-        uploading: '上传中',
-        paused: '暂停中',
-        waiting: '等待中'
-      },
-      fileListLength: 0,
-      panelShow: false, // 选择文件后，展示上传panel
-      collapse: false,
-      isShrink: true,
-      process: -10,
-      pageTitle: this.$route.meta.title,
-      netSpeed: 0,
-      isUploading: false,
-      filePanel: {},
-      processAreaClass: {},
-      pc: true,
-      dragover: false
-    }
-  },
-  computed: {
-    // Uploader实例
-    uploader() {
-      return this.$refs.uploader.uploader
-    }
-  },
-  watch: {},
-  mounted() {
-
-    let that = this
-    let dropbox = document.body
-    dropbox.addEventListener("dragover", function(e){
-      e.stopPropagation();
-      e.preventDefault();
-      if(e.dataTransfer.files.length > 0){
-        that.dragover = true
-      }
-    }, false);
-    dropbox.addEventListener("drop", function(e){
-      e.stopPropagation();
-      e.preventDefault();
-      that.dragover = false
-    }, false);
-
-    Bus.$on('openUploader', query => {
-      this.params = query || {}
-      if (this.$refs.uploadBtn) {
-        $('#global-uploader-btn').click()
-      }
-    })
-    Bus.$on('uploadFolder', query => {
-      this.params = query || {}
-      if (this.$refs.folderBtn) {
-        $('#folder-uploader-btn').click()
-      }
-    })
-
-    Bus.$on('uploadFileListBack',() => {
-      console.log(this.process)
-      if(this.process !== -10 && this.process !== 100 && this.fileListLength !== 0){
-        this.shrink()
-      }
-    })
-
-    this.$nextTick(() => {
-      window.uploader = this.$refs.uploader.uploader
-    })
-
-  },
-  destroyed() {
-    Bus.$off('openUploader')
-    Bus.$off('uploadFolder')
-    Bus.$off('uploadFileListBack')
-  },
-  methods: {
-    onDragenter() {
-      this.params = {
-        currentDirectory: this.$route.query.path || '/',
+  export default {
+    components: {},
+    data($this) {
+      return {
         username: this.$store.state.user.name,
-        userId: this.$store.state.user.userId
+        options: {
+          target: api.simpleUploadURL,
+          chunkSize: 2 * 1024 * 1024,
+          // speedSmoothingFactor: 0.1,
+          // progressCallbacksInterval: 500,
+          maxChunkRetries: 1, // 最大重试次数
+          simultaneousUploads: 3, // 并发上传数
+          testChunks: true, // 是否开启服务器分片校验
+          // 服务器分片校验函数，秒传及断点续传基础
+          checkChunkUploadedByResponse: function(chunk, message) {
+            const objMessage = JSON.parse(message)
+            const res = objMessage.data
+            if(!res){
+              return []
+            }
+            if (res.pass) {
+              // 秒传
+              return true
+            }
+            // 断点续传
+            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
+          },
+          query() {}
+        },
+        attrs: {
+          accept: '*'
+        },
+        statusText: {
+          success: '上传成功',
+          error: '上传失败',
+          uploading: '上传中',
+          paused: '暂停中',
+          waiting: '等待中'
+        },
+        fileListLength: 0,
+        panelShow: false, // 选择文件后，展示上传panel
+        collapse: false,
+        isShrink: true,
+        process: -10,
+        pageTitle: this.$route.meta.title,
+        netSpeed: 0,
+        isUploading: false,
+        filePanel: {},
+        processAreaClass: {},
+        pc: true,
+        dragover: false,
+        isDragStart: false,
       }
     },
-    // onFileAdded(file) {
-    //   console.log('file', file)
-    //   console.log(this.uploader.filePaths)
-    //   this.panelShow = true
-    //   this.computeMD5(file)
-    //   Bus.$emit('fileAdded')
-    // },
-    onFilesAdded(files) {
-      console.log(files)
-      this.fileListLength = this.uploader.fileList.length
-      const filePaths = this.uploader.filePaths
-      const paths = Object.keys(filePaths)
-      const pathsLength = paths.length
-      if (pathsLength > 0) {
-        paths.forEach(path => {
-          const folder = filePaths[path]
-          // 上传文件夹
-          api.uploadFolder({
-            isFolder: true,
-            folderPath: folder.parent.path,
-            filename: folder.name,
+    computed: {
+      // Uploader实例
+      uploader() {
+        return this.$refs.uploader.uploader
+      }
+    },
+    watch: {},
+    mounted() {
+
+      let that = this
+      let dropbox = document.body
+
+      document.body.ondragstart = function(e){
+        return e.target.slot === 'jmal';
+
+      }
+
+      dropbox.addEventListener("dragenter", function(e){
+        e.stopPropagation();
+        e.preventDefault();
+      }, false);
+      dropbox.addEventListener("dragover", function(e){
+        e.stopPropagation();
+        e.preventDefault();
+        if(!that.isDragStart){
+          that.dragover = true
+        }
+      }, false);
+      dropbox.addEventListener("drop", function(e){
+        e.stopPropagation();
+        e.preventDefault();
+        that.dragover = false
+      }, false);
+
+      Bus.$on('onDragStart', isDragStart => {
+        this.isDragStart = isDragStart
+      })
+
+      Bus.$on('openUploader', query => {
+        this.params = query || {}
+        if (this.$refs.uploadBtn) {
+          $('#global-uploader-btn').click()
+        }
+      })
+      Bus.$on('uploadFolder', query => {
+        this.params = query || {}
+        if (this.$refs.folderBtn) {
+          $('#folder-uploader-btn').click()
+        }
+      })
+
+      Bus.$on('uploadFileListBack',() => {
+        console.log(this.process)
+        if(this.process !== -10 && this.process !== 100 && this.fileListLength !== 0){
+          this.shrink()
+        }
+      })
+
+      this.$nextTick(() => {
+        window.uploader = this.$refs.uploader.uploader
+      })
+
+    },
+    destroyed() {
+      Bus.$off('openUploader')
+      Bus.$off('uploadFolder')
+      Bus.$off('uploadFileListBack')
+    },
+    methods: {
+      onDragenter(e) {
+        console.log('onDragenter',e)
+        this.params = {
+          currentDirectory: this.$route.query.path || '/',
+          username: this.$store.state.user.name,
+          userId: this.$store.state.user.userId
+        }
+      },
+      onFilesAdded(files) {
+        this.fileListLength = this.uploader.fileList.length
+        const filePaths = this.uploader.filePaths
+        const paths = Object.keys(filePaths)
+        const pathsLength = paths.length
+        if (pathsLength > 0) {
+          paths.forEach(path => {
+            const folder = filePaths[path]
+            // 上传文件夹
+            api.uploadFolder({
+              isFolder: true,
+              folderPath: folder.parent.path,
+              filename: folder.name,
+              currentDirectory: 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
+        }else{
+          this.pc = false
+          this.shrink()
+        }
+        files.forEach(file => {
+          // 上传文件
+          Object.assign(this.uploader.opts, {
+            query: {
+              isFolder: false,
+              ...this.params
+            }
+          })
+          Bus.$emit('fileAdded')
+        })
+      },
+      onFileProgress(rootFile, file, chunk) {
+        // const fileList = window.uploader.fileList
+        // fileList.forEach(file => {
+        //   file.currentSpeed
+        // })
+        this.netSpeed = formatNetSpeed(file.currentSpeed)
+        this.process = Math.trunc(window.uploader.progress() * 100)
+        if(this.process > 0 && this.process < 100 && window.uploader.fileList.length > 0){
+          window.onbeforeunload = function() {
+            return "还有文件正在上传, 确定退出吗?";
+          }
+        }else{
+          window.onbeforeunload = null
+        }
+        this.isUploading = window.uploader.isUploading()
+        // console.log(`上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)
+      },
+      onFileSuccess(rootFile, file, response) {
+        const res = JSON.parse(response)
+        const data = res.data
+        // 服务器自定义的错误（即虽返回200，但是是错误的情况），这种错误是Uploader无法拦截的
+        if (!data.upload) {
+          // this.$message({ message: res.message, type: 'error' })
+          // 文件状态设为“失败”
+          this.statusSet(file.id, 'failed')
+          return
+        } else {
+          // console.log(`上传成功 ${file.name}`)
+          this.statusSet(file.id, 'success')
+        }
+        // 如果服务端返回需要合并
+        if (data.merge) {
+          // 文件状态设为“合并中”
+          this.statusSet(file.id, 'merging')
+          api.mergeSimpleUpload({
+            filename: file.name,
+            relativePath: file.relativePath,
+            identifier: file.uniqueIdentifier,
             currentDirectory: this.params.currentDirectory,
             username: this.params.username,
-            userId: this.params.userId
+            userId: this.params.userId,
+            totalSize: file.size,
+            isFolder: file.isFolder
           }).then(() => {
-            this.getFileList()
+            // console.log('文件合并成功', res)
+            // 文件合并成功
+            Bus.$emit('fileSuccess')
+            this.statusRemove(file.id)
+            this.statusSet(file.id, 'success')
+            // file.removeFile(file)
           }).catch(e => {})
+
+          // 不需要合并
+        } else {
+          Bus.$emit('fileSuccess')
+          // 完成后从文件列表移除
+          // file.removeFile(file)
+          // console.log('上传成功')
+        }
+        if (file.parent == null) {
+          this.close()
+        }
+      },
+      onFileError(rootFile, file, response) {
+        this.$message({
+          message: response,
+          type: 'error'
         })
-      }
-      if(window.pc){
-        this.pc = true
-        this.panelShow = true
-      }else{
-        this.pc = false
-        this.shrink()
-      }
-      files.forEach(file => {
-        // 上传文件
+      },
+      onFileRemoved() {
+        this.fileListLength = this.uploader.fileList.length
+      },
+      /**
+       * 计算md5，实现断点续传及秒传
+       * @param file
+       */
+      computeMD5(file) {
+        const fileReader = new FileReader()
+        // const time = new Date().getTime()
+        const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
+        let currentChunk = 0
+        const chunkSize = 10 * 1024 * 1024
+        const chunks = Math.ceil(file.size / chunkSize)
+        const spark = new SparkMD5.ArrayBuffer()
+
+        // 文件状态设为"计算MD5"
+        this.statusSet(file.id, 'md5')
+        file.pause()
+
+        loadNext()
+
+        fileReader.onload = e => {
+          spark.append(e.target.result)
+
+          if (currentChunk < chunks) {
+            currentChunk++
+            loadNext()
+
+            // 实时展示MD5的计算进度
+            this.$nextTick(() => {
+              $(`.myStatus_${file.id}`).text('校验MD5 ' + ((currentChunk / chunks) * 100).toFixed(0) + '%')
+            })
+          } else {
+            const md5 = spark.end()
+            this.computeMD5Success(md5, file)
+            // console.log(`MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${file.size} 用时：${new Date().getTime() - time} ms`)
+          }
+        }
+
+        fileReader.onerror = function() {
+          this.error(`文件${file.name}读取出错，请检查该文件`)
+          file.cancel()
+        }
+
+        function loadNext() {
+          const start = currentChunk * chunkSize
+          const end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize
+
+          fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end))
+        }
+      },
+
+      computeMD5Success(md5, file) {
+        // 将自定义参数直接加载uploader实例的opts上
+        // const fileName = file.name
+        // const suffix = fileName.substring(fileName.lastIndexOf('.'), fileName.length)// 后缀名
         Object.assign(this.uploader.opts, {
           query: {
             isFolder: false,
             ...this.params
           }
         })
-        Bus.$emit('fileAdded')
-      })
-    },
-    onFileProgress(rootFile, file, chunk) {
-      // const fileList = window.uploader.fileList
-      // fileList.forEach(file => {
-      //   file.currentSpeed
-      // })
-      this.netSpeed = formatNetSpeed(file.currentSpeed)
-      this.process = Math.trunc(window.uploader.progress() * 100)
-      if(this.process > 0 && this.process < 100 && window.uploader.fileList.length > 0){
-        window.onbeforeunload = function() {
-          return "还有文件正在上传, 确定退出吗?";
-        }
-      }else{
-        window.onbeforeunload = null
-      }
-      this.isUploading = window.uploader.isUploading()
-      // console.log(`上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)
-    },
-    onFileSuccess(rootFile, file, response) {
-      const res = JSON.parse(response)
-      const data = res.data
-      // 服务器自定义的错误（即虽返回200，但是是错误的情况），这种错误是Uploader无法拦截的
-      if (!data.upload) {
-        // this.$message({ message: res.message, type: 'error' })
-        // 文件状态设为“失败”
-        this.statusSet(file.id, 'failed')
-        return
-      } else {
-        // console.log(`上传成功 ${file.name}`)
-        this.statusSet(file.id, 'success')
-      }
-      // 如果服务端返回需要合并
-      if (data.merge) {
-        // 文件状态设为“合并中”
-        this.statusSet(file.id, 'merging')
-        api.mergeSimpleUpload({
-          filename: file.name,
-          relativePath: file.relativePath,
-          identifier: file.uniqueIdentifier,
-          currentDirectory: this.params.currentDirectory,
-          username: this.params.username,
-          userId: this.params.userId,
-          totalSize: file.size,
-          isFolder: file.isFolder
-        }).then(() => {
-          // console.log('文件合并成功', res)
-          // 文件合并成功
-          Bus.$emit('fileSuccess')
-          this.statusRemove(file.id)
-          this.statusSet(file.id, 'success')
-          // file.removeFile(file)
-        }).catch(e => {})
+        file.uniqueIdentifier = md5
+        file.resume()
+        this.statusRemove(file.id)
+      },
 
-        // 不需要合并
-      } else {
-        Bus.$emit('fileSuccess')
-        // 完成后从文件列表移除
-        // file.removeFile(file)
-        // console.log('上传成功')
-      }
-      if (file.parent == null) {
-        this.close()
-      }
-    },
-    onFileError(rootFile, file, response) {
-      this.$message({
-        message: response,
-        type: 'error'
-      })
-    },
-    onFileRemoved() {
-      this.fileListLength = this.uploader.fileList.length
-    },
-    /**
-     * 计算md5，实现断点续传及秒传
-     * @param file
-     */
-    computeMD5(file) {
-      const fileReader = new FileReader()
-      // const time = new Date().getTime()
-      const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
-      let currentChunk = 0
-      const chunkSize = 10 * 1024 * 1024
-      const chunks = Math.ceil(file.size / chunkSize)
-      const spark = new SparkMD5.ArrayBuffer()
+      fileListShow() {
+        const $list = $('#global-uploader .file-list')
 
-      // 文件状态设为"计算MD5"
-      this.statusSet(file.id, 'md5')
-      file.pause()
-
-      loadNext()
-
-      fileReader.onload = e => {
-        spark.append(e.target.result)
-
-        if (currentChunk < chunks) {
-          currentChunk++
-          loadNext()
-
-          // 实时展示MD5的计算进度
-          this.$nextTick(() => {
-            $(`.myStatus_${file.id}`).text('校验MD5 ' + ((currentChunk / chunks) * 100).toFixed(0) + '%')
-          })
+        if ($list.is(':visible')) {
+          $list.slideUp()
+          this.collapse = true
         } else {
-          const md5 = spark.end()
-          this.computeMD5Success(md5, file)
-          // console.log(`MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${file.size} 用时：${new Date().getTime() - time} ms`)
+          $list.slideDown()
+          this.collapse = false
         }
-      }
-
-      fileReader.onerror = function() {
-        this.error(`文件${file.name}读取出错，请检查该文件`)
-        file.cancel()
-      }
-
-      function loadNext() {
-        const start = currentChunk * chunkSize
-        const end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize
-
-        fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end))
-      }
-    },
-
-    computeMD5Success(md5, file) {
-      // 将自定义参数直接加载uploader实例的opts上
-      // const fileName = file.name
-      // const suffix = fileName.substring(fileName.lastIndexOf('.'), fileName.length)// 后缀名
-      Object.assign(this.uploader.opts, {
-        query: {
-          isFolder: false,
-          ...this.params
+      },
+      // 展开球
+      expand() {
+        if(!pc){
+          this.$router.push(`/upload/index_m`)
         }
-      })
-      file.uniqueIdentifier = md5
-      file.resume()
-      this.statusRemove(file.id)
-    },
-
-    fileListShow() {
-      const $list = $('#global-uploader .file-list')
-
-      if ($list.is(':visible')) {
-        $list.slideUp()
-        this.collapse = true
-      } else {
-        $list.slideDown()
-        this.collapse = false
-      }
-    },
-    // 展开球
-    expand() {
-      if(!pc){
-        this.$router.push(`/upload/index_m`)
-      }
-      this.filePanel = {
-        'width': '720px',
-        'height': '300px',
-      }
-      this.processAreaClass = {
-        'right': '66px',
-        'bottom': '66px',
-        'width': '0',
-        'height': '0',
-      }
-      this.isShrink = false
-    },
-    // 收缩成球
-    shrink(){
-      let width = '92px';
-      let height = '92px';
-      let right = '20px';
-      let bottom = '20px';
-      if(!pc){
-        width = '92px';
-        height = '92px';
-        right = '10px';
-        bottom = '70px';
-      }
-      const that = this
-      this.filePanel = {
-        'color': 'white',
-        'z-index': '-1',
-        'right': '20px',
-        'bottom': '20px',
-        'width': '92px',
-        'height': '92px',
-        cursor: 'pointer',
-        'border-radius': '50%',
-      }
-      setTimeout(function () {
-        that.isShrink = true
-        that.processAreaClass = {
-          'right': right,
-          'bottom': bottom,
-          'width': width,
-          'height': height,
+        this.filePanel = {
+          'width': '720px',
+          'height': '300px',
         }
-        that.filePanel = {
-          'color': 'white',
-          'z-index': '-1',
+        this.processAreaClass = {
           'right': '66px',
           'bottom': '66px',
-          'width': '0px',
-          'height': '0px',
+          'width': '0',
+          'height': '0',
+        }
+        this.isShrink = false
+      },
+      // 收缩成球
+      shrink(){
+        let width = '92px';
+        let height = '92px';
+        let right = '20px';
+        let bottom = '20px';
+        if(!pc){
+          width = '92px';
+          height = '92px';
+          right = '10px';
+          bottom = '70px';
+        }
+        const that = this
+        this.filePanel = {
+          'color': 'white',
+          'z-index': '-1',
+          'right': '20px',
+          'bottom': '20px',
+          'width': '92px',
+          'height': '92px',
           cursor: 'pointer',
           'border-radius': '50%',
         }
-      },500)
-    },
-    close() {
-      if(this.process === -10 || this.process === 100 || this.fileListLength === 0){
-        this.uploader.cancel()
-        this.panelShow = false
-      } else {
-        this.$confirm('还有文件正在上传, 确定要关闭吗？', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
+        setTimeout(function () {
+          that.isShrink = true
+          that.processAreaClass = {
+            'right': right,
+            'bottom': bottom,
+            'width': width,
+            'height': height,
+          }
+          that.filePanel = {
+            'color': 'white',
+            'z-index': '-1',
+            'right': '66px',
+            'bottom': '66px',
+            'width': '0px',
+            'height': '0px',
+            cursor: 'pointer',
+            'border-radius': '50%',
+          }
+        },500)
+      },
+      close() {
+        if(this.process === -10 || this.process === 100 || this.fileListLength === 0){
           this.uploader.cancel()
           this.panelShow = false
-        })
-      }
-    },
-
-    /**
-     * 新增的自定义的状态: 'md5'、'transcoding'、'failed'
-     * @param id
-     * @param status
-     */
-    statusSet(id, status) {
-      const statusMap = {
-        md5: {
-          text: '校验MD5',
-          bgc: '#fff'
-        },
-        merging: {
-          text: '合并中',
-          bgc: '#e2eeff'
-        },
-        transcoding: {
-          text: '转码中',
-          bgc: '#e2eeff'
-        },
-        failed: {
-          text: '上传失败',
-          bgc: '#e2eeff'
-        },
-        success: {
-          text: '上传成功',
-          bgc: '#e2eeff'
+        } else {
+          this.$confirm('还有文件正在上传, 确定要关闭吗？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            this.uploader.cancel()
+            this.panelShow = false
+          })
         }
-      }
+      },
 
-      this.$nextTick(() => {
-        $(`<p class="myStatus_${id}"></p>`).appendTo(`.file_${id} .uploader-file-status`).css({
-          'position': 'absolute',
-          'top': '-14px',
-          'font-size': '13px',
-          'left': '0',
-          'right': '0',
-          'bottom': '0',
-          'zIndex': '1',
-          'backgroundColor': statusMap[status].bgc
-        }).text(statusMap[status].text)
-      })
-    },
-    statusRemove(id) {
-      this.$nextTick(() => {
-        $(`.myStatus_${id}`).remove()
-      })
-    },
-
-    error(msg) {
-      this.$notify({
-        title: '错误',
-        message: msg,
-        type: 'error',
-        duration: 2000
-      })
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-    #global-uploader {
-        position: fixed;
-        z-index: 1002;
-        right: 15px;
-        bottom: 15px;
-
-        .uploader-drop {
-          text-align: center;
-          position: fixed;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background-color: #ffffff99;
-          span {
-            font-size: 34px;
-            font-weight: 700;
-            color: #616161;
-            position: relative;
-            top: 48%;
+      /**
+       * 新增的自定义的状态: 'md5'、'transcoding'、'failed'
+       * @param id
+       * @param status
+       */
+      statusSet(id, status) {
+        const statusMap = {
+          md5: {
+            text: '校验MD5',
+            bgc: '#fff'
+          },
+          merging: {
+            text: '合并中',
+            bgc: '#e2eeff'
+          },
+          transcoding: {
+            text: '转码中',
+            bgc: '#e2eeff'
+          },
+          failed: {
+            text: '上传失败',
+            bgc: '#e2eeff'
+          },
+          success: {
+            text: '上传成功',
+            bgc: '#e2eeff'
           }
         }
 
-        .uploader-app {
-            width: 720px;
+        this.$nextTick(() => {
+          $(`<p class="myStatus_${id}"></p>`).appendTo(`.file_${id} .uploader-file-status`).css({
+            'position': 'absolute',
+            'top': '-14px',
+            'font-size': '13px',
+            'left': '0',
+            'right': '0',
+            'bottom': '0',
+            'zIndex': '1',
+            'backgroundColor': statusMap[status].bgc
+          }).text(statusMap[status].text)
+        })
+      },
+      statusRemove(id) {
+        this.$nextTick(() => {
+          $(`.myStatus_${id}`).remove()
+        })
+      },
+
+      error(msg) {
+        this.$notify({
+          title: '错误',
+          message: msg,
+          type: 'error',
+          duration: 2000
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  #global-uploader {
+    position: fixed;
+    z-index: 1002;
+    right: 15px;
+    bottom: 15px;
+
+    .uploader-drop {
+      text-align: center;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: #ffffff99;
+      span {
+        font-size: 34px;
+        font-weight: 700;
+        color: #616161;
+        position: relative;
+        top: 48%;
+      }
+    }
+
+    .uploader-app {
+      width: 720px;
+    }
+
+    .file-panel {
+      background-color: #fff;
+      border: 1px solid #e2e2e2;
+      box-shadow: 0 0 10px rgba(0, 0, 0, .2);
+
+      right: 2%;
+      bottom: 2%;
+      width: 720px;
+      height: 300px;
+      color: black;
+      margin: auto;
+      overflow: hidden;
+      background-size: 100% 100%;
+      border-radius: 7px 7px 0 0;
+      position: fixed;
+      -webkit-transition: all .5s ease-in-out 0s;
+      transition: all .5s ease-in-out 0s;
+
+      ul{
+        white-space: nowrap;
+        -webkit-overflow-scrolling: touch;
+        overflow-x: auto;
+        overflow-y: hidden;
+        padding: 0 0.1rem;
+        margin-bottom: -.2rem;
+        overflow: -moz-scrollbars-none;
+        overflow: -moz-scrollbars-none;
+      }
+      ul::-webkit-scrollbar{
+        display: none;
+      }
+
+      .file-title {
+        display: flex;
+        height: 3.5rem;
+        // line-height: 3.5rem;
+        padding: 0 10px;
+        border-bottom: 1px solid #ddd;
+        .files-title {
+          margin-left: 3%;
+          font-size: 20px;
         }
-
-        .file-panel {
-            background-color: #fff;
-            border: 1px solid #e2e2e2;
-            box-shadow: 0 0 10px rgba(0, 0, 0, .2);
-
-            right: 2%;
-            bottom: 2%;
-            width: 720px;
-            height: 300px;
-            color: black;
-            margin: auto;
-            overflow: hidden;
-            background-size: 100% 100%;
-            border-radius: 7px 7px 0 0;
-            position: fixed;
-            -webkit-transition: all .5s ease-in-out 0s;
-            transition: all .5s ease-in-out 0s;
-
-            ul{
-              white-space: nowrap;
-              -webkit-overflow-scrolling: touch;
-              overflow-x: auto;
-              overflow-y: hidden;
-              padding: 0 0.1rem;
-              margin-bottom: -.2rem;
-              overflow: -moz-scrollbars-none;
-              overflow: -moz-scrollbars-none;
-            }
-            ul::-webkit-scrollbar{
-              display: none;
-            }
-
-            .file-title {
-                display: flex;
-                height: 3.5rem;
-                // line-height: 3.5rem;
-                padding: 0 10px;
-                border-bottom: 1px solid #ddd;
-                .files-title {
-                  margin-left: 3%;
-                  font-size: 20px;
-                }
-                .operate {
-                    flex: 1;
-                    text-align: right;
-                  .button-collapse {
-                    padding: 16px 5px;
-                    font-size: 25px;
-                    margin-left: 0;
-                  }
-                }
-            }
-
-            .file-list {
-                position: relative;
-                max-height: 300px;
-                /*height: 49px;*/
-                overflow-x: hidden;
-                list-style-type: none;
-                overflow-y: auto;
-                background-color: #fff;
-                padding: 0;
-                margin: 0;
-                > li {
-                    background-color: #fff;
-                }
-            }
-            &.collapse {
-                .file-title {
-                    background-color: #E7ECF2;
-                }
-            }
+        .operate {
+          flex: 1;
+          text-align: right;
+          .button-collapse {
+            padding: 16px 5px;
+            font-size: 25px;
+            margin-left: 0;
+          }
         }
+      }
 
-        .no-file {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            font-size: 16px;
+      .file-list {
+        position: relative;
+        max-height: 300px;
+        /*height: 49px;*/
+        overflow-x: hidden;
+        list-style-type: none;
+        overflow-y: auto;
+        background-color: #fff;
+        padding: 0;
+        margin: 0;
+        > li {
+          background-color: #fff;
         }
-
-        /deep/.uploader-file-icon {
-            &:before {
-                content: '' !important;
-            }
-            background: url(./images/file.svg);
-            &[icon=image] {
-                background: url(./images/image.svg);
-            }
-            &[icon=video] {
-                background: url(./images/video.svg);
-            }
-            &[icon=document] {
-                background: url(./images/docment.svg);
-            }
-            &[icon=audio] {
-              background: url(./images/audio.svg);
-            }
-            &[icon=folder] {
-              background: url(./images/folder.svg);
-            }
-        }
-
-        /deep/.uploader-file-actions > span {
-            margin-right: 6px;
+      }
+      &.collapse {
+        .file-title {
+          background-color: #E7ECF2;
         }
+      }
     }
 
-    /deep/.uploader-file-status {
-      width: 32%;
-      text-indent: 20px;
-    }
-    /deep/.uploader-file-meta {
-      width: 0;
-    }
-    /deep/.uploader-file-icon {
-      width: 32px;
-      height: 32px;
-      display: inline-block;
-      vertical-align: top;
-      margin-top: 8px;
-      margin-right: 8px;
-    }
-    /deep/.uploader-file-actions>span {
-      margin-right: 6px;
-      margin-left: 8px;
-    }
-
-    /* 隐藏上传按钮 */
-    #global-uploader-btn {
-        position: absolute;
-        clip: rect(0, 0, 0, 0);
-    }
-    #folder-uploader-btn {
+    .no-file {
       position: absolute;
-      clip: rect(0, 0, 0, 0);
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 16px;
     }
 
+    /deep/.uploader-file-icon {
+      &:before {
+        content: '' !important;
+      }
+      background: url(./images/file.svg);
+      &[icon=image] {
+        background: url(./images/image.svg);
+      }
+      &[icon=video] {
+        background: url(./images/video.svg);
+      }
+      &[icon=document] {
+        background: url(./images/docment.svg);
+      }
+      &[icon=audio] {
+        background: url(./images/audio.svg);
+      }
+      &[icon=folder] {
+        background: url(./images/folder.svg);
+      }
+    }
+
+    /deep/.uploader-file-actions > span {
+      margin-right: 6px;
+    }
+  }
+
+  /deep/.uploader-file-status {
+    width: 32%;
+    text-indent: 20px;
+  }
+  /deep/.uploader-file-meta {
+    width: 0;
+  }
+  /deep/.uploader-file-icon {
+    width: 32px;
+    height: 32px;
+    display: inline-block;
+    vertical-align: top;
+    margin-top: 8px;
+    margin-right: 8px;
+  }
+  /deep/.uploader-file-actions>span {
+    margin-right: 6px;
+    margin-left: 8px;
+  }
+
+  /* 隐藏上传按钮 */
+  #global-uploader-btn {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+  }
+  #folder-uploader-btn {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+  }
 
 
-    .process-area {
+
+  .process-area {
+    right: 66px;
+    bottom: 66px;
+    width: 0;
+    height: 0;
+    -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
+    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
+    cursor: pointer;
+    background: #eee;
+    margin: auto;
+    overflow: hidden;
+    background-size: 100% 100%;
+    border-radius: 50%;
+    position: fixed;
+    /*animation: load-process-area .5s 1 linear forwards;*/
+    /*transition: all .5s;*/
+    -webkit-transition: all .5s ease-in-out 0s;
+    transition: all .5s ease-in-out 0s;
+  }
+
+  .process-area .process-info {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    text-align: center;
+  }
+  .process-area .process-info .process {
+    font-size: 1.5rem;
+  }
+  .process-area .process-info .net-speed {
+    font-size: .7rem;
+    white-space: nowrap;
+  }
+
+  .process-anime {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    border: 4px solid #fff;
+    transform: translate(-50%,-50%);
+    width: 90px;
+    height: 90px;
+    background: linear-gradient(45deg,#fde47c,#fdeca6);
+    border-radius: 50%;
+    overflow: hidden;
+  }
+  .process-anime .cube-a {
+    position: absolute;
+    left: 50%;
+    background: rgba(53,53,53,.3);
+    width: 130px;
+    height: 130px;
+    border-radius: 50px;
+    animation: fx-rotate 15s infinite linear;
+    transform-origin: 50% 50%;
+    transition: .5s;
+  }
+  .process-anime .cube-b {
+    position: absolute;
+    left: 50%;
+    background: #fff;
+    width: 130px;
+    height: 130px;
+    border-radius: 50px;
+    animation: fx-rotate 10s infinite reverse linear;
+    transform-origin: 50% 50%;
+    transition: .5s;
+  }
+
+  /**成功**/
+  .process-anime .done {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%) scale(2.25);
+  }
+  .process-anime .done .checkmark {
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    display: block;
+    stroke-width: 2;
+    stroke: #fff;
+    stroke-miterlimit: 10;
+    box-shadow: inset 0 0 0 #fdda65;
+    animation: fill-data .4s ease-in-out .4s forwards,scale-data .3s ease-in-out .9s both;
+  }
+  .process-anime .done .checkmark__check {
+    transform: translate(2px,2px);
+    transform-origin: 50% 50%;
+    stroke-dasharray: 48;
+    stroke-dashoffset: 48;
+    animation: stroke-data .3s cubic-bezier(.65,0,.45,1) .8s forwards;
+  }
+
+  @keyframes fx-rotate {
+    0% {
+      transform: translate(-50%) rotate(0);
+    }
+    100% {
+      transform: translate(-50%,2px) rotate(365deg);
+    }
+  }
+
+  @keyframes scale-data {
+    0%, 100% {
+      transform: none;
+    }
+    50% {
+      transform: scale3d(1.1,1.1,1);
+    }
+  }
+  @keyframes fill-data {
+    100% {
+      box-shadow: inset 0 0 0 30px #fdda65;
+    }
+  }
+
+  @keyframes stroke-data {
+    100% {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes load-process-area {
+    0% {
       right: 66px;
       bottom: 66px;
       width: 0;
       height: 0;
-      -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
-      box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
-      cursor: pointer;
-      background: #eee;
-      margin: auto;
-      overflow: hidden;
-      background-size: 100% 100%;
-      border-radius: 50%;
-      position: fixed;
-      /*animation: load-process-area .5s 1 linear forwards;*/
-      /*transition: all .5s;*/
-      -webkit-transition: all .5s ease-in-out 0s;
-      transition: all .5s ease-in-out 0s;
     }
-
-    .process-area .process-info {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%,-50%);
-      text-align: center;
-    }
-    .process-area .process-info .process {
-      font-size: 1.5rem;
-    }
-    .process-area .process-info .net-speed {
-      font-size: .7rem;
-      white-space: nowrap;
-    }
-
-    .process-anime {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      border: 4px solid #fff;
-      transform: translate(-50%,-50%);
-      width: 90px;
-      height: 90px;
-      background: linear-gradient(45deg,#fde47c,#fdeca6);
-      border-radius: 50%;
-      overflow: hidden;
-    }
-    .process-anime .cube-a {
-      position: absolute;
-      left: 50%;
-      background: rgba(53,53,53,.3);
-      width: 130px;
-      height: 130px;
-      border-radius: 50px;
-      animation: fx-rotate 15s infinite linear;
-      transform-origin: 50% 50%;
-      transition: .5s;
-    }
-    .process-anime .cube-b {
-      position: absolute;
-      left: 50%;
-      background: #fff;
-      width: 130px;
-      height: 130px;
-      border-radius: 50px;
-      animation: fx-rotate 10s infinite reverse linear;
-      transform-origin: 50% 50%;
-      transition: .5s;
-    }
-
-    /**成功**/
-    .process-anime .done {
-      position: absolute;
-      width: 45px;
-      height: 45px;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%,-50%) scale(2.25);
-    }
-    .process-anime .done .checkmark {
-      width: 45px;
-      height: 45px;
-      border-radius: 50%;
-      display: block;
-      stroke-width: 2;
-      stroke: #fff;
-      stroke-miterlimit: 10;
-      box-shadow: inset 0 0 0 #fdda65;
-      animation: fill-data .4s ease-in-out .4s forwards,scale-data .3s ease-in-out .9s both;
-    }
-    .process-anime .done .checkmark__check {
-      transform: translate(2px,2px);
-      transform-origin: 50% 50%;
-      stroke-dasharray: 48;
-      stroke-dashoffset: 48;
-      animation: stroke-data .3s cubic-bezier(.65,0,.45,1) .8s forwards;
-    }
-
-    @keyframes fx-rotate {
-      0% {
-        transform: translate(-50%) rotate(0);
-      }
-      100% {
-        transform: translate(-50%,2px) rotate(365deg);
-      }
-    }
-
-    @keyframes scale-data {
-      0%, 100% {
-        transform: none;
-      }
-      50% {
-        transform: scale3d(1.1,1.1,1);
-      }
-    }
-    @keyframes fill-data {
-      100% {
-        box-shadow: inset 0 0 0 30px #fdda65;
-      }
-    }
-
-    @keyframes stroke-data {
-      100% {
-        stroke-dashoffset: 0;
-      }
-    }
-
-    @keyframes load-process-area {
-      0% {
-        right: 66px;
-        bottom: 66px;
-         width: 0;
-         height: 0;
-       }
-      100% {
-        right: 20px;
-        bottom: 20px;
-        width: 92px;
-        height: 92px;
-      }
+    100% {
+      right: 20px;
+      bottom: 20px;
+      width: 92px;
+      height: 92px;
     }
+  }
 </style>
diff --git a/src/views/test/图片上加文字.html b/src/views/test/图片上加文字.html
new file mode 100644
index 0000000..f411796
--- /dev/null
+++ b/src/views/test/图片上加文字.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang=en>
+<title>Example of DataTransfer.setDragImage()</title>
+<meta name="viewport" content="width=device-width">
+<style>
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #source {
+    color: blue;
+    border: 1px solid black;
+  }
+  #target {
+    border: 1px solid black;
+  }
+</style>
+<script>
+</script>
+<body>
+<img src="../../assets/img/moveFile.png">
+<h1>Example of <code>DataTransfer.setDragImage()</code></h1>
+<div>
+  <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
+    Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
+</div>
+<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
+</body>
+</html>
diff --git a/src/views/test/拖拽.html b/src/views/test/拖拽.html
new file mode 100644
index 0000000..ddae795
--- /dev/null
+++ b/src/views/test/拖拽.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang=en>
+<title>Example of DataTransfer.setDragImage()</title>
+<meta name="viewport" content="width=device-width">
+<style>
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #source {
+    color: blue;
+    border: 1px solid black;
+  }
+  #target {
+    border: 1px solid black;
+  }
+</style>
+<script>
+  function dragstart_handler(ev) {
+    console.log("dragStart");
+    // 设置拖动的格式和数据。使用事件目标的id作为数据
+    // ev.dataTransfer.setData("text/plain", ev.target.id);
+    // 创建一个图像并且使用它作为拖动图像
+    // 请注意： 改变 "example.gif" 为一个已经存在的图片
+    // 或者，一个还没有创建出来的图片，那么浏览器将会使用默认的拖动图片
+    // 译者注：默认的拖动图片与拖动对象没有联系。一般是一个小型文件图标
+    let img = new Image();
+    img.src = 'https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png';
+    ev.dataTransfer.setDragImage(img, 10, 10);
+  }
+
+  function dragover_handler(ev) {
+    console.log("dragOver");
+    ev.preventDefault();
+  }
+
+  function drop_handler(ev) {
+    console.log("Drop");
+    ev.preventDefault();
+    // 获取拖放目标的id数据
+    let data = ev.dataTransfer.getData("text");
+    ev.target.appendChild(document.getElementById(data));
+  }
+</script>
+<body>
+<h1>Example of <code>DataTransfer.setDragImage()</code></h1>
+<div>
+  <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
+    Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
+</div>
+<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
+</body>
+</html>