|
|
|
|
@ -1,5 +1,6 @@
|
|
|
|
|
import { Component, OnInit } from '@angular/core'; |
|
|
|
|
import { HttpClient } from '@angular/common/http'; |
|
|
|
|
import { FileUploader } from 'ng2-file-upload'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -10,6 +11,14 @@ import { HttpClient } from '@angular/common/http';
|
|
|
|
|
}) |
|
|
|
|
export class UploadingCADComponent implements OnInit { |
|
|
|
|
|
|
|
|
|
uploader:FileUploader = new FileUploader({ //初始化上传文件
|
|
|
|
|
url: "/api/Objects/PlanPlatform",
|
|
|
|
|
method: "POST",
|
|
|
|
|
itemAlias: "uploadedfile", |
|
|
|
|
autoUpload: false, |
|
|
|
|
removeAfterUpload:true, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
constructor(private http:HttpClient,) { } |
|
|
|
|
|
|
|
|
|
ngOnInit(): void { |
|
|
|
|
@ -18,12 +27,191 @@ export class UploadingCADComponent implements OnInit {
|
|
|
|
|
|
|
|
|
|
displayedColumns: string[] = ['checked', 'name', 'time', 'state','size']; |
|
|
|
|
dataSource:any; //所有CAD图
|
|
|
|
|
//选择文件
|
|
|
|
|
filechange(e){ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//上传文件↓
|
|
|
|
|
file:any; //上传的文件
|
|
|
|
|
uploadisLoading:boolean = false; //进度条loading加载
|
|
|
|
|
progress:number=0; //进度条进度
|
|
|
|
|
objectName:any; //上传对象名
|
|
|
|
|
uploadId:any; //上传分块上传事件编号
|
|
|
|
|
|
|
|
|
|
//change选择文件
|
|
|
|
|
uploadFile (e) { |
|
|
|
|
this.file = e.target.files[0] || null //上传的文件
|
|
|
|
|
this.startUploading() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//上传文件
|
|
|
|
|
uploader(){ |
|
|
|
|
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) |
|
|
|
|
alert('上传成功!') |
|
|
|
|
}else { // 上传文件后获取服务器返回的数据错误
|
|
|
|
|
let tempRes = JSON.parse(response); |
|
|
|
|
console.log(tempRes) |
|
|
|
|
}}; |
|
|
|
|
} else if (file && fileSize>shardSize) { //上传文件>5MB时,分块上传
|
|
|
|
|
let data = {filename: file.name} |
|
|
|
|
this.uploadisLoading = true |
|
|
|
|
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) |
|
|
|
|
this.progress = Number((i/allSlice).toFixed(2))*100 |
|
|
|
|
|
|
|
|
|
if (this.PartNumberETag.length === allSlice) { |
|
|
|
|
this.progress = 100 |
|
|
|
|
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=>{ |
|
|
|
|
this.progress = 0; |
|
|
|
|
this.uploadisLoading = false |
|
|
|
|
this.file = null //清空文件
|
|
|
|
|
this.uploader.clearQueue(); //清空input控件文件
|
|
|
|
|
this.PartNumberETag =[] //清空保存返回的信息
|
|
|
|
|
alert('上传成功!') |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//取消分块上传
|
|
|
|
|
cancel () { |
|
|
|
|
this.http.delete(`/api/MultipartUpload/PlanPlatform/${this.objectName}?uploadId=${this.uploadId}`).subscribe(data=>{ |
|
|
|
|
this.progress = 0; |
|
|
|
|
this.uploadisLoading= false |
|
|
|
|
this.file = null //清空文件
|
|
|
|
|
this.uploader.clearQueue(); //清空input控件文件
|
|
|
|
|
this.PartNumberETag =[] //清空保存返回的信息
|
|
|
|
|
alert('取消上传成功!') |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//下载↓
|
|
|
|
|
download:any = 'PlanPlatform/YYY/5e6f10f8504aeb36d43cf5e1.jpg'; //下载的文件
|
|
|
|
|
downloadisLoading:boolean = false; //进度条loading加载
|
|
|
|
|
downloadProgress:number=0; //进度条进度
|
|
|
|
|
|
|
|
|
|
//读取下载文件信息
|
|
|
|
|
readFile () { |
|
|
|
|
this.http.get('/api/ObjectMetadata/'+this.download).subscribe(data=>{ |
|
|
|
|
this.download = data |
|
|
|
|
this.downloadFile() |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//初始化下载
|
|
|
|
|
downloadFile () { |
|
|
|
|
let file = this.download |
|
|
|
|
let fileSize = file.fileLength//下载文件的总大小
|
|
|
|
|
let shardSize = 10 * 1024 * 1024 //文件大小是否大于10MB
|
|
|
|
|
|
|
|
|
|
if (file && fileSize<=shardSize) { //<=10MB时直接下载
|
|
|
|
|
this.http.get(`/api/Objects/PlanPlatform/${file.objectName}`,{responseType: 'blob'},).subscribe(data=>{ |
|
|
|
|
|
|
|
|
|
let url = window.URL.createObjectURL(new Blob([data])); //new Blob创建一个下载Blob的url地址
|
|
|
|
|
let link = document.createElement("a"); |
|
|
|
|
link.style.display = "none"; |
|
|
|
|
link.href = url; |
|
|
|
|
link.setAttribute("download", file.fileName); |
|
|
|
|
document.body.appendChild(link); |
|
|
|
|
link.click(); |
|
|
|
|
}) |
|
|
|
|
} else if (file && fileSize>shardSize) { //>10MB时分块下载
|
|
|
|
|
this.blockingDownload() //分段下载
|
|
|
|
|
this.downloadisLoading = true |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//分段下载并合并
|
|
|
|
|
async blockingDownload () { |
|
|
|
|
let file = this.download |
|
|
|
|
let fileSize = file.fileLength //下载文件的总大小
|
|
|
|
|
let shardSize = 3 * 1024 * 1024 //3MB一个分片
|
|
|
|
|
let allSlice = Math.ceil(fileSize / shardSize) //总文件/3MB===共分多少段
|
|
|
|
|
let allFile:any = [] //所有的file分段
|
|
|
|
|
|
|
|
|
|
for (let i=0;i<allSlice;i++) { |
|
|
|
|
let start = i * shardSize //每次下载文件开始位置
|
|
|
|
|
let end = Math.min(fileSize, start + shardSize-1); //每次下载文件结束为止
|
|
|
|
|
|
|
|
|
|
let result = await new Promise ((result,reject)=>{ |
|
|
|
|
this.http.get(`/api/Objects/PlanPlatform/${file.objectName}`,{headers:{'range':`bytes= ${start}-${end}`},responseType:'blob'}).subscribe(data=>{ |
|
|
|
|
result(data) })
|
|
|
|
|
}) |
|
|
|
|
allFile.push(result) |
|
|
|
|
this.downloadProgress = Number((i/allSlice).toFixed(2))*100 |
|
|
|
|
|
|
|
|
|
if (allFile.length === allSlice) { //合并文件输出给浏览器
|
|
|
|
|
let url = window.URL.createObjectURL(new Blob(allFile)); //new Blob创建一个下载Blob的url地址
|
|
|
|
|
let link = document.createElement("a"); |
|
|
|
|
link.style.display = "none"; |
|
|
|
|
link.href = url; |
|
|
|
|
link.setAttribute("download", file.fileName); |
|
|
|
|
document.body.appendChild(link); |
|
|
|
|
link.click(); |
|
|
|
|
this.downloadisLoading = false |
|
|
|
|
this.download = 'PlanPlatform/YYY/5e6f10f8504aeb36d43cf5e1.jpg' |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} //for循环
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
