[测试]测试上传文件夹功能

src/app/is-login.service.ts

@@ -77,4 +77,91 @@ export class IsLoginService {
 
 
 
+  //上传文件
+  objectName:any //上传对象名
+  uploadisLoading:boolean = false //上传进度条显示
+  uploadProgress:any = 0
+  uploadId:any; //上传分块上传事件编号
+  //e是上传的文件 selectedDataBank是需要上传的地址 包括  XXX资料库 + 文件夹路径
+  startUploading (e,selectedDataBank) {
+    let file = e || null //获取上传的文件
+    let fileSize = file.size || null //上传文件的总大小
+    let shardSize = 5 * 1024 * 1024 //5MB一个分片
+
+    if (file && fileSize<=shardSize) { //上传文件<=5MB时
+      let formData = new FormData()
+      formData.append("file",file)
+      // console.log(666,file)
+      this.http.post(`/api/Objects/drives/${selectedDataBank}`,formData).subscribe((data:any)=>{
+        this.objectName = data.objectName
+        console.log(666,data)
+        //当全部循环完毕重新加载列表
+        // this.getALLFileList(this.selectedDataBank)
+      })
+    } else if (file && fileSize>shardSize) { //上传文件>5MB时,分块上传
+      let data = {filename: file.name}
+      this.uploadisLoading = true
+      this.http.post(`/api/NewMultipartUpload/drives/${selectedDataBank}`,{},{params:data}).subscribe((data:any)=>{ //初始化分段上传
+        this.objectName = data.objectName
+        this.uploadId = data.uploadId
+        this.subsectionUploading(e)
+      })
+    }
+
+  }
+
+  PartNumberETag:any=[]; //每次返回需要保存的信息
+  //开始分段上传
+  async subsectionUploading (e) {
+    let file = e || null //获取上传的文件
+    let fileSize = file.size || null //上传文件的总大小
+    let shardSize = 5 * 1024 * 1024 //5MB一个分片
+    let allSlice = Math.ceil(fileSize / shardSize) //总文件/5MB===共分多少段
+
+    for (let i = 0;i < allSlice;i++) { //循环分段上传
+        let start = i * shardSize //切割文件开始位置
+        let end = Math.min(fileSize, start + shardSize); //切割文件结束位置
+        let formData = new FormData()
+        formData.append("file",file.slice(start, end))
+
+        //同步写法实现异步调用
+        let result = await new Promise((resolve, reject) => {
+          // await 需要后面返回一个 promise 对象
+          this.http.post(`/api/MultipartUpload/drives/${this.objectName}?uploadId=${this.uploadId}&partNumber=${i+1}`,formData).subscribe((data:any)=>{
+              let msg = {
+                "partNumber":data.partNumber || null,
+                "eTag": data.eTag || null}
+              resolve(msg) // 调用 promise 内置方法处理成功
+          })
+        });
+        this.PartNumberETag.push(result)
+        this.uploadProgress = Number((i/allSlice).toFixed(2))*100
+
+        if (this.PartNumberETag.length === allSlice) {
+          this.uploadProgress = 100
+          this.endUploading()}
+    }//for循环
+
+  }
+
+  //完成分块上传
+  endUploading () {
+    let data = this.PartNumberETag
+    let paramsData = {uploadId:this.uploadId}
+    this.http.post(`/api/CompleteMultipartUpload/drives/${this.objectName}`,data,{params:paramsData}).subscribe(data=>{
+      
+      
+      //当全部循环完毕重新加载列表
+      // this.getALLFileList(this.selectedDataBank)
+      this.uploadProgress = 0;
+      this.uploadisLoading = false
+      this.PartNumberETag =[] //清空保存返回的信息
+      // const config = new MatSnackBarConfig();
+      // config.verticalPosition = 'top';
+      // config.duration = 3000
+      // this.snackBar.open('上传成功','确定',config)
+    })
+  }
+
+
 }

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

@@ -13,13 +13,13 @@
                 </div>
                 <div>
                     <span>上传文件夹</span>
-                    <input type="file">
+                    <input multiple webkitdirectory type="file" (change)='selectFiles($event)'> 
                 </div>
             </div>
         </div>
-        <div class="newFile" (click)="yyy()" *ngIf="downloadFile.isLogin"> 
+        <!-- <div class="newFile" (click)="yyy()" *ngIf="downloadFile.isLogin"> 
             <mat-icon>create_new_folder</mat-icon> <span>新建文件夹</span>
-        </div>
+        </div> -->
         <div class="newFile" style="width: 88px;" *ngIf="isDelete" (click)='downLoadFile()'> 
             <mat-icon>save_alt</mat-icon> <span>下载</span>
         </div>

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

@@ -79,6 +79,7 @@ export class AllFileComponent implements OnInit {
     this.http.get(`/api/Objects/drives`,{
       params:paramsdata
     }).subscribe((data:any) => {
+      console.log(data)
       this.oldDataSource = data.contents //保存表格数据
       data.contents.forEach((item)=>{
         let typeArr = item.key.split('.')
@@ -101,6 +102,7 @@ export class AllFileComponent implements OnInit {
     const numRows = this.dataSource.data.length;
     return numSelected === numRows;
   }
+
   //控制全选按钮
   masterToggle() {
     this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach(row => this.selection.select(row));
@@ -140,7 +142,7 @@ export class AllFileComponent implements OnInit {
         console.log(data)
       },
       err=>{
-        
+
       })
     }
   }
@@ -229,6 +231,26 @@ export class AllFileComponent implements OnInit {
       })
   }
   
+
+  fileArr:any
+  //文件夹
+  selectFiles (e) {
+    this.fileArr = e.target.files || null //上传的文件
+    console.log(this.fileArr.length)
+    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)
+    } 
+  }
+
+
+
+
   //上传文件
   objectName:any //上传对象名
   uploadisLoading:boolean = false //上传进度条显示