断点续传input隐藏

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;