|
|
|
|
@ -1,6 +1,8 @@
|
|
|
|
|
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'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -11,15 +13,24 @@ import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dial
|
|
|
|
|
}) |
|
|
|
|
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 = []; //选中需要下载的图片
|
|
|
|
|
|
|
|
|
|
@ -40,8 +51,8 @@ export class RealisticPictureComponent implements OnInit {
|
|
|
|
|
|
|
|
|
|
} else { //预览图片
|
|
|
|
|
let dialogRef = this.dialog.open(previewImg,
|
|
|
|
|
{height: '400px',
|
|
|
|
|
width:'600px', |
|
|
|
|
{width: '1600px', |
|
|
|
|
height:'900px', |
|
|
|
|
data: {}}); |
|
|
|
|
dialogRef.afterClosed().subscribe();
|
|
|
|
|
} |
|
|
|
|
@ -66,6 +77,87 @@ export class RealisticPictureComponent implements OnInit {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//上传文件↓
|
|
|
|
|
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 =[] //清空保存返回的信息
|
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
@ -82,13 +174,36 @@ 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} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
