AX.Angular9DataCollection/src/app/ui/realistic-picture/realistic-picture.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { FileUploader, FileItem } from 'ng2-file-upload';
import Swiper from 'swiper';



@Component({
  selector: 'app-realistic-picture',
  templateUrl: './realistic-picture.component.html',
  styleUrls: ['./realistic-picture.component.scss']
})
export class RealisticPictureComponent implements OnInit {

  uploader:FileUploader = new FileUploader({ //初始化上传文件
    url: "/api/Objects/PlanPlatform",  
    method: "POST",    
    itemAlias: "uploadedfile",
    autoUpload: false,
    removeAfterUpload:true,
  }); 

  constructor(private http:HttpClient,public dialog: MatDialog) { }

  ngOnInit(): void {
    console.log(sessionStorage.getItem('realName'))
  }

  allRealPicture:any=[{name:'单位实景图'},{name:'高科技创业园'}]; //所有实景图文件
  selectReal:any; //选中的实景图文件
  selectRealIndex:any=0; //选中的实景图文件下标
  miniImg:'?x-oss-process=image/resize,m_fill,h_100,w_100'; //缩略图片格式
  isDownload:boolean = false; //是否批量下载
  downloadList:any = []; //选中需要下载的图片

  //切换左侧实际图文件
  changeReal (e,index) {
    if (this.selectRealIndex != index) {
      this.selectReal = e
      this.selectRealIndex = index
    }
  }

  //选择批量下载 
  download () {this.isDownload = !this.isDownload}

  // 预览图片---批量选择图片
  operation () {
    if (this.isDownload) { //批量选择图片

    } else { //预览图片
      let dialogRef = this.dialog.open(previewImg, 
        {width: '1600px',
        height:'900px',
          data: {}});
      dialogRef.afterClosed().subscribe();   
    }

  }

  //新建实景图文件
  addReal () {
    let dialogRef = this.dialog.open(addRealPicture, 
      {data: {}});
    dialogRef.afterClosed().subscribe();   
  }

  //编辑实景图文件
  editReal () {
    if (this.selectReal) {
      let dialogRef = this.dialog.open(editRealPicture, 
        {data: {}});
      dialogRef.afterClosed().subscribe();   
    }
  }



  //上传文件↓
  file:any; //上传的文件
  objectName:any; //上传对象名
  uploadId:any; //上传分块上传事件编号

  //change选择文件
  uploadFile (e) {
    this.file = e.target.files[0] || null //上传的文件
    this.startUploading()
  }

  //上传文件
  startUploading () {
    let file = this.file || null //获取上传的文件
    let fileSize = file.size || null //上传文件的总大小
    let shardSize = 5 * 1024 * 1024 //5MB一个分片

    if (file && fileSize<=shardSize) { //上传文件<=5MB时
      this.uploader.queue[0].upload();//开始上传
      this.uploader.queue[0].onSuccess = (response, status, headers) => {    
        if (status == 201) { // 上传文件成功,上传文件后获取服务器返回的数据
          let tempRes = JSON.parse(response);
          console.log(tempRes)
        }else { // 上传文件后获取服务器返回的数据错误
          let tempRes = JSON.parse(response);
          console.log(tempRes)   
        }};
    } else if (file && fileSize>shardSize) { //上传文件>5MB时,分块上传
      let data = {filename: file.name}
      this.http.post(`/api/NewMultipartUpload/PlanPlatform/YYY`,{},{params:data}).subscribe((data:any)=>{ //初始化分段上传
        this.objectName = data.objectName
        this.uploadId = data.uploadId
        this.subsectionUploading()
      })
    }

  }

  PartNumberETag:any=[]; //每次返回需要保存的信息
  //开始分段上传
  async subsectionUploading () {
    let file = this.file || 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/PlanPlatform/${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)
        if (this.PartNumberETag.length === allSlice) {this.endUploading()}
    }//for循环

  }

  //完成分块上传
  endUploading () {
    let data = this.PartNumberETag
    let paramsData = {uploadId:this.uploadId}
    this.http.post(`/api/CompleteMultipartUpload/PlanPlatform/${this.objectName}`,data,{params:paramsData}).subscribe(data=>{
      alert('图片上传成功!')
      this.file = null //清空文件
      this.PartNumberETag =[] //清空保存返回的信息
    })
  }





}



//预览图片组件
@Component({
  selector: 'app-previewImg',
  templateUrl: './previewImg.html',
  styleUrls: ['./realistic-picture.component.scss']
})
export class previewImg {

  constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<previewImg>,
    @Inject(MAT_DIALOG_DATA) public data) { }
    testSwiper: Swiper;

  ngOnInit(): void {
 
  }

  ngAfterViewInit() {
    this.testSwiper = new Swiper('.swiper-container', {
      direction: 'horizontal',
      loop: false,

      // 如果需要前进后退按钮
      navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
      }
    });
  }

  rotationAngle:number=0; //旋转角度
  //旋转图片
  rotate () {
    this.rotationAngle = this.rotationAngle+90
    if (this.rotationAngle === 360) {this.rotationAngle = 0}
  }





}



//新建实景图文件组件
@Component({
  selector: 'app-addRealPicture',
  templateUrl: './addRealPicture.html',
  styleUrls: ['./realistic-picture.component.scss']
})
export class addRealPicture {

  constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<addRealPicture>,
    @Inject(MAT_DIALOG_DATA) public data) { }

  ngOnInit(): void {}



}



//编辑实景图文件组件
@Component({
  selector: 'app-editRealPicture',
  templateUrl: './editRealPicture.html',
  styleUrls: ['./realistic-picture.component.scss']
})
export class editRealPicture {

  constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<editRealPicture>,
    @Inject(MAT_DIALOG_DATA) public data) { }

  ngOnInit(): void {}



}