From 345cd7744ccec66e8871ebf366e1c93feedfc784 Mon Sep 17 00:00:00 2001
From: "jinlan.du" <jinlan.du@cyberplus.com>
Date: Wed, 20 May 2020 15:11:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=AD=E7=82=B9=E7=BB=AD=E4=BC=A0input?=
 =?UTF-8?q?=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../view/example/breakpoint/breakpoint.vue    | 45 +++++++++----------
 1 file changed, 22 insertions(+), 23 deletions(-)

diff --git a/web/src/view/example/breakpoint/breakpoint.vue b/web/src/view/example/breakpoint/breakpoint.vue
index 67373db1..a297f305 100644
--- a/web/src/view/example/breakpoint/breakpoint.vue
+++ b/web/src/view/example/breakpoint/breakpoint.vue
@@ -2,24 +2,24 @@
   <div class="hello">
      <el-divider content-position="left">大文件上传</el-divider>
     <form id="fromCont" method="post" >
-      <div class="fileUpload">
-        选择文件<input @change="choseFile" id="file" multiple="multiple" type="file"  />
+      <div class="fileUpload" @click="inputChange">
+        选择文件
+        <input v-show="false"  @change="choseFile" id="file" multiple="multiple" type="file" ref="Input"  />
       </div>
     </form>
      <el-button @click="getFile" :disabled="limitFileSize" type="primary" size="medium" class="uploadBtn">上传文件</el-button>
     <div class="el-upload__tip">请上传不超过5MB的文件</div>
     <div class="list">
-      <transition-group name="list" tag="p">
-        <div class="list-item" v-for="item in uploadList" :key="item.name" >
+      <transition  name="list" tag="p">
+        <div class="list-item" v-if="file" >
           <i class="el-icon-document"></i>
-          <span>{{ item.name }}</span>
-          <span v-if="file" class="percentage" >{{percentage}}%</span>
+          <span>{{ file.name }}</span>
+          <span class="percentage" >{{percentage}}%</span>
           <el-progress  :show-text='false' :text-inside="false" :stroke-width="2" :percentage="percentage"></el-progress>
         </div> 
-      </transition-group>
+      </transition>
    </div>
-    
-    <!-- <span
+     <!-- <span
       v-if="this.file"
     >{{Math.floor(((this.formDataList.length-this.waitNum)/this.formDataList.length)*100)}}%</span> -->
     <div class="tips">此版本为先行体验功能测试版，样式美化和性能优化正在进行中，上传切片文件和合成的完整文件分别再QMPlusserver目录的breakpointDir文件夹和fileDir文件夹</div>
@@ -45,8 +45,7 @@ export default {
       limitFileSize: false,
       percentage:0,
       percentageFlage: true,
-      customColor: '#409eff',
-      uploadList:[]
+      customColor: '#409eff'
     }
   },
   created(){
@@ -59,6 +58,7 @@ export default {
       const file = e.target.files[0] // 获取当前文件
       const maxSize = 5*1024*1024
       this.file = file // file 丢全局方便后面用 可以改进为func传参形式
+      this.percentage = 0
     if(file.size<maxSize){
       fileR.readAsArrayBuffer(file) // 把文件读成ArrayBuffer  主要为了保持跟后端的流一致
       fileR.onload = async e => {
@@ -123,9 +123,6 @@ export default {
         this.percentageFlage = false
       }
       this.sliceFile() // 上传切片
-      if(this.percentage == 100){
-        this.uploadList.push(this.file)
-      }
     },
     sliceFile() {
       this.waitUpLoad &&
@@ -164,6 +161,9 @@ export default {
           await removeChunk(params)
         }
       }
+    },
+    inputChange(){
+      this.$refs.Input.dispatchEvent(new MouseEvent('click'))
     }
   }
 }
@@ -198,15 +198,14 @@ a {
     border-radius: 4px;
     overflow: hidden;
     display: inline-block;
-  input{
-    position: absolute;
-    font-size: 100px;
-    right: 0;
-    top: 0;
-    opacity: 0;
-    cursor: pointer;
-  }
- 
+    input{
+      position: absolute;
+      font-size: 100px;
+      right: 0;
+      top: 0;
+      opacity: 0;
+      cursor: pointer;
+    }
 }
  .fileName{
     display: inline-block;