[新增]上传文件夹初步实现以及文件夹名字显示

src/app/is-login.service.ts

@@ -82,8 +82,11 @@ export class IsLoginService {
   uploadisLoading:boolean = false //上传进度条显示
   uploadProgress:any = 0
   uploadId:any; //上传分块上传事件编号
+
+  filesTag:any //每上传成功一个文件就往里面加一个标识
+
   //e是上传的文件 selectedDataBank是需要上传的地址 包括  XXX资料库 + 文件夹路径
-  startUploading (e,selectedDataBank) {
+  startUploading (e,selectedDataBank,result,reject,filesnum) {
     let file = e || null //获取上传的文件
     let fileSize = file.size || null //上传文件的总大小
     let shardSize = 5 * 1024 * 1024 //5MB一个分片
@@ -94,7 +97,13 @@ export class IsLoginService {
       // console.log(666,file)
       this.http.post(`/api/Objects/drives/${selectedDataBank}`,formData).subscribe((data:any)=>{
         this.objectName = data.objectName
-        console.log(666,data)
+
+        result(data)
+        this.filesTag.push(data)
+        if(this.filesTag.length == filesnum){
+          alert("文件夹全部上传完毕")
+        }
+        
         //当全部循环完毕重新加载列表
         // this.getALLFileList(this.selectedDataBank)
       })
@@ -104,7 +113,7 @@ export class IsLoginService {
       this.http.post(`/api/NewMultipartUpload/drives/${selectedDataBank}`,{},{params:data}).subscribe((data:any)=>{ //初始化分段上传
         this.objectName = data.objectName
         this.uploadId = data.uploadId
-        this.subsectionUploading(e)
+        this.subsectionUploading(e,result,reject,filesnum)
       })
     }
 
@@ -112,7 +121,7 @@ export class IsLoginService {
 
   PartNumberETag:any=[]; //每次返回需要保存的信息
   //开始分段上传
-  async subsectionUploading (e) {
+  async subsectionUploading (e,result,reject,filesnum) {
     let file = e || null //获取上传的文件
     let fileSize = file.size || null //上传文件的总大小
     let shardSize = 5 * 1024 * 1024 //5MB一个分片
@@ -139,18 +148,23 @@ export class IsLoginService {
 
         if (this.PartNumberETag.length === allSlice) {
           this.uploadProgress = 100
-          this.endUploading()}
+          this.endUploading(result,reject,filesnum)}
     }//for循环
 
   }
 
   //完成分块上传
-  endUploading () {
+  endUploading (result,reject,filesnum) {
     let data = this.PartNumberETag
     let paramsData = {uploadId:this.uploadId}
+    
     this.http.post(`/api/CompleteMultipartUpload/drives/${this.objectName}`,data,{params:paramsData}).subscribe(data=>{
       
-      
+      result(data)
+      this.filesTag.push(data)
+      if(this.filesTag.length == filesnum){
+        alert("文件夹全部上传完毕")
+      }
       //当全部循环完毕重新加载列表
       // this.getALLFileList(this.selectedDataBank)
       this.uploadProgress = 0;

src/app/navigation/navigation.component.ts

@@ -83,7 +83,11 @@ export class NavigationComponent implements OnInit {
   getAllDataBank(){
     this.http.get('/api/DataBanks').subscribe(data => {
       this.allDataBank = data
-
+      console.log(123,data)
+    }
+    ,
+    err=>{
+      console.log(456,err)
     })
   }
   //点击资料库

src/app/pipes/size.pipe.ts

@@ -22,4 +22,11 @@ export class NamePipe implements PipeTransform {
         let nameArr = name.split("/")
         return nameArr[nameArr.length - 1]
     }
+}
+@Pipe({name: 'name2'})
+export class NamePipe2 implements PipeTransform {
+    transform(name: string): string {
+        let nameArr = name.split("/")
+        return nameArr[nameArr.length - 2]
+    }
 }

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

@@ -99,10 +99,14 @@
               <img *ngIf="element.type == 'bmp'" src="../../../assets/images/bmp.png" alt="">
               <img *ngIf="element.type == 'txt'" src="../../../assets/images/txt.png" alt="">
               <img *ngIf="element.type == 'pptx'" src="../../../assets/images/ppt.png" alt="">
+              <img *ngIf="element.isDir" src="../../../assets/images/file.png" alt="">
               <i class="iconfont icon-mp"></i>
-              <span class="filename" (click)="clickName($event,element)">
+              <span *ngIf="element.isDir == false" class="filename" (click)="clickName($event,element)">
                 {{element.key | name}} 
               </span>
+              <span *ngIf="element.isDir == true" class="filename" (click)="clickName($event,element)">
+                {{element.key | name2}} 
+              </span>
               
         </td>
         </ng-container>

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

@@ -6,6 +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';
 @Component({
   selector: 'app-all-file',
   templateUrl: './all-file.component.html',
@@ -74,10 +75,12 @@ export class AllFileComponent implements OnInit {
   getALLFileList(name){
     this.selectedDataBank = name
     let paramsdata = {
-      prefix : this.selectedDataBank
+      prefix : this.selectedDataBank + "/",
+      delimiter : "/"
     }
     this.http.get(`/api/Objects/drives`,{
       params:paramsdata
+
     }).subscribe((data:any) => {
       console.log(data)
       this.oldDataSource = data.contents //保存表格数据
@@ -216,6 +219,7 @@ export class AllFileComponent implements OnInit {
     }, 0);
   }
   file:any //需要上传的文件
+
   //input file 选择文件
   selectFile (e) {
     this.file = e.target.files[0] || null //上传的文件
@@ -234,19 +238,26 @@ export class AllFileComponent implements OnInit {
 
   fileArr:any
   //上传文件夹
-  selectFiles (e) {
+  async selectFiles (e) {
     this.fileArr = e.target.files || null //上传的文件
-    console.log(this.fileArr.length)
+
+    let _this = this
     for (var i = 0;i < this.fileArr.length; i++) {
       let f = this.fileArr[i];
-      
       let lastIndex =  f.webkitRelativePath.lastIndexOf("/")
       let url = f.webkitRelativePath.substring(0, lastIndex)
-      console.log(333,url)
       let adddress = this.selectedDataBank + "/" + url
-      this.downloadFile.startUploading(f,adddress)
+      let filesnum = _this.fileArr.length
+      let result =  await new Promise ((result,reject)=>{
+        this.downloadFile.startUploading(f,adddress,result,reject,filesnum)
+      })
+      
     } 
   }
+
+
+
+
   //新建文件夹
   createFolder(){
     const dialogRef = this.dialog.open(FolderDialog, {//调用open方法打开对话框并且携带参数过去
@@ -256,7 +267,6 @@ export class AllFileComponent implements OnInit {
     });
     dialogRef.afterClosed().subscribe((data)=>{
       if(data){
-        console.log(data)
         //创建空文件夹
         this.http.post(`/api/Objects/drives/${this.selectedDataBank}/`,"").subscribe(data=>{
           this.getALLFileList(this.selectedDataBank)

src/app/ui/ui.module.ts

@@ -47,7 +47,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatPaginatorIntl } from '@angular/material/paginator';
 import { PersonaldataComponent } from '../pages/personaldata/personaldata.component';
 import { ChangepasswordComponent } from './changepassword/changepassword.component';
-import { SizePipe , NamePipe} from '../pipes/size.pipe';
+import { SizePipe , NamePipe,NamePipe2} from '../pipes/size.pipe';
 import {ConfirmpswDirective} from './changepassword/equal-validator.directive';
 import { FileUploadModule } from 'ng2-file-upload'
 import { AllFileComponent, ViewDetails, FolderDialog } from './all-file/all-file.component';
@@ -55,7 +55,7 @@ import { ChangeuserdataComponent } from './changeuserdata/changeuserdata.compone
 import { LoginComponent } from './login/login.component';
 
 @NgModule({
-  declarations: [FolderDialog,ViewDetails,PersonaldataComponent, ChangepasswordComponent,SizePipe,NamePipe,ConfirmpswDirective, AllFileComponent, ChangeuserdataComponent, LoginComponent],
+  declarations: [FolderDialog,ViewDetails,PersonaldataComponent, ChangepasswordComponent,SizePipe,NamePipe,NamePipe2,ConfirmpswDirective, AllFileComponent, ChangeuserdataComponent, LoginComponent],
 
   imports: [
     CommonModule,