[完善] 自定义处置预案底图分块上传

src/app/canvas-share-data.service.ts

@@ -1,3 +1,4 @@
+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import {ReplaySubject} from 'rxjs';
 import { Observable } from 'rxjs';
@@ -7,7 +8,7 @@ import { GameMode } from './working-area/model/gameMode';
   providedIn: 'root'
 })
 export class CanvasShareDataService {
-  constructor() { }
+  constructor(private http:HttpClient) { }
   private _sendMessage: ReplaySubject<any> = new ReplaySubject<any>(1);
 
   examDisposalNodesData; // 考生进入时获取当前试卷的处置节点
@@ -81,6 +82,49 @@ export class CanvasShareDataService {
     return this._sendMessage.asObservable();
   }
 
+  //分段上传
+  sectionUpload (companyId:string,file) {
+    let data = {filename: file.name}
+    return new Promise ((resolve, reject)=>{
+      this.http.post(`/api/NewMultipartUpload/PlanPlatform/${companyId}/DisposalNode`,{},{params:data}).subscribe(async (data:any)=>{ //初始化分段上传
+        let objectName = data.objectName
+        let uploadId = data.uploadId
+        let PartNumberETag = []; //每次返回需要保存的信息
+        //分块 处理
+        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/PlanPlatform/${objectName}?uploadId=${uploadId}&partNumber=${i+1}`,formData).subscribe((data:any)=>{
+                let msg = { "partNumber":data.partNumber || null, "eTag": data.eTag || null }
+                resolve(msg) // 调用 promise 内置方法处理成功
+              })
+            });
+            PartNumberETag.push(result)
+  
+            if (PartNumberETag.length === allSlice) { //分块上传完成
+              let data = PartNumberETag
+              let paramsData = {uploadId:uploadId}
+              this.http.post(`/api/CompleteMultipartUpload/PlanPlatform/${objectName}`,data,{params:paramsData}).subscribe(data=>{
+                resolve(objectName)
+              })
+             }
+        }//for循环
+
+        //分块 处理
+      })
+    })
+  }
+
   // 处置节点 筛选出 匹配数据 匹配不到 return undefined
   findDisposalNode(parentId: string= null, name: string= null) {
     if (parentId && name) { // 匹配 父id, name

src/app/ui/collection-tools-building/collection-tools.component.spec.ts

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

src/app/ui/collection-tools-building/collection-tools.component.ts

@@ -1934,7 +1934,7 @@ export class CollectionToolsBuildingComponent implements OnInit {
     e.stopPropagation();
     let file = e.target.files[0] || null //获取上传的文件
     let fileSize = file.size || null //上传文件的总大小
-    let maxSize = 10 * 1024 * 1024 //5MB一个分片
+    let maxSize = 5 * 1024 * 1024 //5MB一个分片
 
     if (file && fileSize<=maxSize) { //上传文件<=5MB时
       let formData = new FormData()

src/app/ui/collection-tools-plan/collection-tools.component.spec.ts

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

src/app/ui/collection-tools-plan/collection-tools.component.ts

@@ -1944,7 +1944,7 @@ export class CollectionToolsPlanComponent implements OnInit {
     e.stopPropagation();
     let file = e.target.files[0] || null //获取上传的文件
     let fileSize = file.size || null //上传文件的总大小
-    let maxSize = 10 * 1024 * 1024 //5MB一个分片
+    let maxSize = 5 * 1024 * 1024 //5MB一个分片
 
     if (file && fileSize<=maxSize) { //上传文件<=5MB时
       let formData = new FormData()

src/app/ui/collection-tools-plan/leftFunctionalDomain.ts

@@ -28,7 +28,7 @@ export class leftFunctionalDomainComponentPlan implements OnInit {
   //选择文件
   selectFile (e) {
     if (e.target.files.length) {
-      let maxSize = 10*1024*1024 
+      let maxSize = 5*1024*1024 
       if (e.target.files[0].size <= maxSize) {
         this.file = e.target.files[0]
       } else {
@@ -55,7 +55,6 @@ export class leftFunctionalDomainComponentPlan implements OnInit {
       formData.append("file",this.file)
       this.http.post(`/api/Objects/WebPlan2D/${sessionStorage.getItem('companyId')}`,formData).subscribe((data:any)=>{
         let imgURL = '/api/Objects/WebPlan2D/' + data.objectName
-        console.log(imgURL)
         if (!this.data.isBuilding) { //总平面图 创建平面图
           let data = {
             companyId: sessionStorage.getItem('companyId'),

src/app/ui/collection-tools/collection-tools.component.spec.ts

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

src/app/ui/collection-tools/collection-tools.component.ts

@@ -1972,7 +1972,7 @@ export class CollectionToolsComponent implements OnInit {
     e.stopPropagation();
     let file = e.target.files[0] || null //获取上传的文件
     let fileSize = file.size || null //上传文件的总大小
-    let maxSize = 10 * 1024 * 1024 //5MB一个分片
+    let maxSize = 5 * 1024 * 1024 //5MB一个分片
 
     if (file && fileSize<=maxSize) { //上传文件<=5MB时
       let formData = new FormData()

src/app/ui/collection-tools/leftFunctionalDomain.ts

@@ -152,7 +152,7 @@ export class addBGCDisposalNodeComponent implements OnInit {
         const config = new MatSnackBarConfig();
         config.verticalPosition = 'top';
         config.duration = 3000
-        this.snackBar.open('上传图片需小于5MB','确定',config);
+        this.snackBar.open('上传图片需小于10MB','确定',config);
       }
     }
   }

src/app/ui/collection-tools/save.ts

@@ -332,11 +332,17 @@ export class saveOneDialog {
     return new Promise((resolve,reject)=>{
       if (this.canvasData.selectPanelPoint.BackgroundImageUrl && !this.canvasData.selectPanelPoint.DisposalNodeId) { //新建逻辑
         if (this.canvasData.customizeDisposalNode) {
-          let formData = new FormData()
-          formData.append("file",this.canvasData.customizeDisposalNode.file)
-          this.http.post(`/api/Objects/WebPlan2D/${sessionStorage.getItem('companyId')}/DisposalNode`,formData).subscribe((data:any)=>{
-            resolve('/api/Objects/WebPlan2D/' + data.objectName)
-          })
+          let fiveSize = 5*1024*1024
+          if (this.canvasData.customizeDisposalNode.file.size <= fiveSize) { //小于5MB
+            let formData = new FormData()
+            formData.append("file",this.canvasData.customizeDisposalNode.file)
+            this.http.post(`/api/Objects/WebPlan2D/${sessionStorage.getItem('companyId')}/DisposalNode`,formData).subscribe((data:any)=>{
+              resolve('/api/Objects/WebPlan2D/' + data.objectName)
+            })
+          } else { //大于5MB
+            let upload = this.canvasData.sectionUpload(sessionStorage.getItem('companyId'),this.canvasData.customizeDisposalNode.file)
+            upload.then(res=>{ resolve('/api/Objects/PlanPlatform/' + res) })
+          } //else
         }
       } else {
         resolve(null)