[完善]上传文件夹 复刻 百度网盘 完成

proxy.config.json

@@ -1,6 +1,6 @@
 {
     "/api": {
-      "target": "http://192.168.1.250",
+      "target": "http://192.168.110.109:8100",
       "secure": false,
       "changeOrigin": true
     }

src/app/ui/all-file/all-file.component.html

@@ -34,11 +34,11 @@
             <mat-progress-bar mode="determinate" [value]="uploadProgress" class="progress"></mat-progress-bar>
         </div>
 
-        <div class="progressBox" *ngIf="uploadisLoading2">
+        <!-- <div class="progressBox" *ngIf="uploadisLoading2">
             <button mat-raised-button style="margin-right: 5px;width: 84px;height: 33px;" (click)="cancel2()">取消上传</button>
             <span style="font-size: 12px;">文件夹上传中...(当前上传 {{uploadProgress2}} )</span>
             <mat-spinner determinate style="position: absolute;right: 0;right: 260px;bottom: -10px;" diameter=40></mat-spinner>
-        </div>
+        </div> -->
 
         <div class="progressBox" *ngIf="downloadFile.isDownloading">
         <!-- <button mat-raised-button style="margin-right: 5px;" (click)="cancelDowload()">取消下载</button> -->
@@ -142,4 +142,8 @@
     </div>
 </div>
 
+<div class="fixedBox" [hidden]="!uploadisLoading2">
+  <app-upload-files [thatFile]='this' #child></app-upload-files>
+</div>
+
 

src/app/ui/all-file/all-file.component.scss

@@ -209,4 +209,12 @@
     white-space: nowrap;
     border-radius: 3px;
     box-sizing: border-box;
+}
+
+//上传文件夹弹窗
+.fixedBox {
+  position: fixed;
+  bottom: 3%;
+  right: 3%;
+  width: 500px;
 }

src/app/ui/all-file/all-file.component.ts

@@ -6,7 +6,7 @@ import { HttpClient,HttpHeaders } from '@angular/common/http';
 import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 import { IsLoginService } from '../../is-login.service'
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { async } from '@angular/core/testing';
+import {UploadFilesComponent} from '../upload-files/upload-files.component'
 @Component({
   selector: 'app-all-file',
   templateUrl: './all-file.component.html',
@@ -31,6 +31,7 @@ export class AllFileComponent {
 
   selection = new SelectionModel(true, []);
   @ViewChild(MatSort) sort: MatSort;
+  @ViewChild( 'child',{static: false} ) child:UploadFilesComponent //上传文件夹子组件
 
   oldDataSource:any; //原始表格数据
   //表头排序
@@ -348,6 +349,8 @@ export class AllFileComponent {
   //上传文件夹
   async selectFiles (e) {
     this.fileArr = e.target.files || null //上传的文件
+    this.uploadisLoading2 = true
+    this.child.handleData() //子组件处理数据格式
     let _this = this
     for (var i = 0;i < this.fileArr.length; i++) {
       let f = this.fileArr[i];
@@ -359,8 +362,8 @@ export class AllFileComponent {
       let result =  await new Promise ((result,reject)=>{
         this.startUploading2(f,adddress,result,reject,filesnum,this.selectedDataBank)
       })
-      
-    } 
+    
+    }
   }
 
   //上传文件
@@ -375,24 +378,29 @@ export class AllFileComponent {
     let fileSize = file.size || null //上传文件的总大小
     let shardSize = 5 * 1024 * 1024 //5MB一个分片
     this.uploadisLoading2 = true
-    this.uploadProgress2 =  0 + "/" + filesnum
+    // this.uploadProgress2 =  0 + "/" + filesnum
+    this.child.uploading(file) //子组件 当前文件正在上传
 
     if (file && fileSize<=shardSize) { //上传文件<=5MB时
-      // console.log(selectedDataBank)
+
       let formData = new FormData()
       formData.append("file",file)
       this.http.post(`/api/Objects/drives/${selectedDataBank2}`,formData).subscribe((data:any)=>{
         this.objectName2 = data.objectName
         this.filesTag2.push("data")
-        this.zone.run(() => {
-        　　setTimeout(() => this.uploadProgress2 =  this.filesTag2.length + "/" + filesnum, 0);
-        });
+
+        // this.zone.run(() => {
+        // 　　setTimeout(() => this.uploadProgress2 =  this.filesTag2.length + "/" + filesnum, 0);
+        // });
+
         result("成功了")
+        this.child.endUpload(file) //子组件 当前文件上传成功
 
         if(this.filesTag2.length == filesnum){
           this.filesTag2 = [] //清空计数文件夹
           this.uploadProgress2 = filesnum + "/" + filesnum
           this.uploadisLoading2 = false
+          this.child.delete() //清空上传文件夹子组件数据
 
           const config = new MatSnackBarConfig();
           config.verticalPosition = 'top';
@@ -441,25 +449,26 @@ export class AllFileComponent {
         });
         this.PartNumberETag2.push(result)
         if (this.PartNumberETag2.length === allSlice) {
-          this.endUploading2(_result,reject,filesnum,selectedDataBank2)}
+          this.endUploading2(e,_result,reject,filesnum,selectedDataBank2)}
     }//for循环
 
   }
 
   //完成分块上传
-  endUploading2 (result,reject,filesnum,selectedDataBank2) {
+  endUploading2 (e,result,reject,filesnum,selectedDataBank2) {
     let data = this.PartNumberETag2
     let paramsData = {uploadId:this.uploadId2}
 
     this.http.post(`/api/CompleteMultipartUpload/drives/${this.objectName2}`,data,{params:paramsData}).subscribe(data=>{
       
       this.filesTag2.push("data")
-      this.zone.run(() => {
-        　　setTimeout(() => this.uploadProgress2 =  this.filesTag2.length + "/" + filesnum, 0);
-      });
+      // this.zone.run(() => {
+      //   　　setTimeout(() => this.uploadProgress2 =  this.filesTag2.length + "/" + filesnum, 0);
+      // });
       
       
       result("成功了")
+      this.child.endUpload(e) //子组件 当前文件上传成功
 
       if(this.filesTag2.length == filesnum){
 
@@ -467,6 +476,7 @@ export class AllFileComponent {
         this.uploadisLoading2 = false
 
         this.filesTag2 = [] //清空计数文件夹
+        this.child.delete() //清空上传文件夹子组件数据
         this.getALLFileList(selectedDataBank2)
         const config = new MatSnackBarConfig();
         config.verticalPosition = 'top';
@@ -482,7 +492,11 @@ export class AllFileComponent {
   cancel2 () {
     this.http.delete(`/api/MultipartUpload/drives/${this.objectName2}?uploadId=${this.uploadId2}`).subscribe(data=>{
       this.uploadisLoading2= false
+      this.fileArr = {}
       this.PartNumberETag2 =[] //清空保存返回的信息
+      this.filesTag2 = [] //清空计数文件夹
+      this.child.delete() //清空上传文件夹子组件数据
+      this.getALLFileList(this.selectedDataBank)
       const config = new MatSnackBarConfig();
       config.verticalPosition = 'top';
       config.duration = 3000

src/app/ui/ui.module.ts

@@ -54,9 +54,10 @@ import { AllFileComponent, ViewDetails, FolderDialog } from './all-file/all-file
 import { ChangeuserdataComponent } from './changeuserdata/changeuserdata.component';
 import { LoginComponent } from './login/login.component';
 import { IsLoginService } from '../is-login.service';
+import { UploadFilesComponent } from './upload-files/upload-files.component';
 
 @NgModule({
-  declarations: [FolderDialog,ViewDetails,PersonaldataComponent, ChangepasswordComponent,SizePipe,NamePipe,NamePipe2,ConfirmpswDirective, AllFileComponent, ChangeuserdataComponent, LoginComponent],
+  declarations: [FolderDialog,ViewDetails,PersonaldataComponent, ChangepasswordComponent,SizePipe,NamePipe,NamePipe2,ConfirmpswDirective, AllFileComponent, ChangeuserdataComponent, LoginComponent, UploadFilesComponent],
 
   imports: [
     CommonModule,

src/app/ui/upload-files/upload-files.component.html

@@ -0,0 +1,23 @@
+<div class="content">
+  <div class="header">
+    <label style="font-size: 14px;">上传中...</label>
+    <button mat-raised-button style="margin-left: 70%;" *ngIf="isShow" (click)='toggle()'><mat-icon>keyboard_arrow_down</mat-icon></button>
+    <button mat-raised-button style="margin-left: 70%;" *ngIf="!isShow" (click)='toggle()'><mat-icon>keyboard_arrow_up</mat-icon></button>
+  </div>
+
+  <div style="margin-top: 10px; border-top: 1px solid #e2e2e2;" [hidden]="!isShow">
+
+    <p class="dataStyle" *ngFor="let item of filesData">
+      <span class="dataName">{{item.name}}</span>
+      <span class="dataSize">{{item.size | size}}</span>
+      <span class="dataState" style="position: relative;">
+        <label *ngIf="item.state==0">等待中...</label>
+        <label *ngIf="item.state==1"><mat-spinner diameter=24></mat-spinner></label>
+        <label *ngIf="item.state==2" style="color: green;">√</label>
+      </span>
+      <span class="dataState" *ngIf="item.state==1 && item.size > 5242880" style="font-size: 22px; cursor:pointer;" title='取消上传' (click)='cancel()'> × </span>
+    </p>
+
+  </div>
+
+</div>

src/app/ui/upload-files/upload-files.component.scss

@@ -0,0 +1,72 @@
+.content {
+  width: 100%; 
+  max-height: 250px; 
+  overflow-y: auto; 
+  overflow-x: hidden; 
+  background-color: #fff;
+  border: 1px solid #e2e2e2;
+  box-shadow: 0 0 10px #ccc;
+  border-radius: 10px;
+  box-sizing: border-box;
+  padding: 10px;
+}
+.header {
+  box-sizing: border-box;
+  height: 30px;
+  line-height: 30px;
+  button {
+    height: 30px; 
+    line-height: 30px;
+  }
+}
+
+//每一行数据
+.dataStyle {
+  height: 30px;
+  line-height: 30px;
+  margin: 5px 0;
+  box-sizing: border-box;
+  padding: 0 3px;
+  span{
+    display: inline-block;
+    font-size: 12px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 30px;
+  }
+ .dataName {
+   width: 40%;
+   margin-right: 10px;
+ }
+ .dataSize {
+   width: 20%;
+ }
+ .dataState {
+  width: 15%;
+  }
+}
+.dataStyle:hover {
+  background-color: #e2e2e2;
+}
+
+
+
+//滚动条样式
+.content::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width : 6px;  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+.content::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  box-shadow   : inset 0 0 5px #999;
+  background   : #535353;
+}
+.content::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  box-shadow   : inset 0 0 5px #999;
+  border-radius: 10px;
+  background   : #ededed;
+}

src/app/ui/upload-files/upload-files.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UploadFilesComponent } from './upload-files.component';
+
+describe('UploadFilesComponent', () => {
+  let component: UploadFilesComponent;
+  let fixture: ComponentFixture<UploadFilesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UploadFilesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UploadFilesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/ui/upload-files/upload-files.component.ts

@@ -0,0 +1,67 @@
+import { Component, OnInit,Input } from '@angular/core';
+
+@Component({
+  selector: 'app-upload-files',
+  templateUrl: './upload-files.component.html',
+  styleUrls: ['./upload-files.component.scss']
+})
+export class UploadFilesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+   
+  }
+  
+  @Input( ) thatFile:any //父组件
+
+  isShow:boolean = true; //弹出框最大/化最小化
+  filesData:any = []; //上传文件夹数据
+
+  //上传文件夹弹窗显隐
+  toggle () {
+    this.isShow = !this.isShow
+  }
+
+  //处理数据格式
+  handleData () {
+    this.filesData = []
+    for (let i=0; i<this.thatFile.fileArr.length; i++) {
+      this.thatFile.fileArr[i].state = 0
+      this.filesData.push(this.thatFile.fileArr[i])
+    }
+  }
+
+  //当前上传文件正在上传
+  uploading (e) {
+    this.filesData.forEach(element => {
+      if (element.name == e.name) {
+        element.state = 1 
+        return
+      }
+    });
+  }
+
+  //当前上传文件上传成功
+  endUpload (e) {
+    this.filesData.forEach(element => {
+      if (element.name == e.name) {
+        element.state = 2 
+        return
+      }
+    });
+  }
+
+  //清空数据
+  delete () {
+    this.filesData = []
+  }
+
+  //取消上传
+  cancel () {
+    this.thatFile.cancel2()
+  }
+
+
+
+}