shaojiahao
/
AnxinCloudDisk
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[完善]上传下载 完善

master
邵佳豪 5 years ago
parent
e2684a3c34
commit
da24d69fa4
5 changed files with 204 additions and 146 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 100
      src/app/is-login.service.ts
  3. 4
      src/app/navigation/navigation.component.ts
  4. 18
      src/app/ui/all-file/all-file.component.html
  5. 226
      src/app/ui/all-file/all-file.component.ts

2
package.json
Unescape View File

@ -3,7 +3,7 @@
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.config.json --open --port 4100 ",
"start": "ng serve --proxy-config proxy.config.json --open --port 4300 ",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",

100
src/app/is-login.service.ts
Unescape View File

@ -22,6 +22,7 @@ export class IsLoginService {
let shardSize = 10 * 1024 * 1024 //文件大小是否大于10MB
if (file && fileSize<=shardSize) { //<=10MB时直接下载
this.downloadProgress = 70
this.http.get(`/api/Objects/drives/${file.objectName}`,{responseType: 'blob'},).subscribe(data=>{
let url = window.URL.createObjectURL(new Blob([data])); //createObjectURL创建一个下载Blob的url地址
@ -75,103 +76,4 @@ export class IsLoginService {
}
//上传文件
objectName:any //上传对象名
uploadisLoading:boolean = false //上传进度条显示
uploadProgress:any = 0
uploadId:any; //上传分块上传事件编号
filesTag:any = [] //每上传成功一个文件就往里面加一个标识
//e是上传的文件 selectedDataBank是需要上传的地址 包括 XXX资料库 + 文件夹路径
startUploading (e,selectedDataBank,result,reject,filesnum) {
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)
this.http.post(`/api/Objects/drives/${selectedDataBank}`,formData).subscribe((data:any)=>{
this.objectName = data.objectName
result("成功了")
this.filesTag.push(data)
if(this.filesTag.length == filesnum){
alert("文件夹全部上传完毕")
//当全部循环完毕重新加载列表
// this.allfile.getALLFileList(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,result,reject,filesnum)
})
}
}
PartNumberETag:any=[]; //每次返回需要保存的信息
//开始分段上传
async subsectionUploading (e,result,reject,filesnum) {
let file = e || null //获取上传的文件
let fileSize = file.size || null //上传文件的总大小
let shardSize = 5 * 1024 * 1024 //5MB一个分片
let allSlice = Math.ceil(fileSize / shardSize) //总文件/5MB===共分多少段
let _result = result
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(_result,reject,filesnum)}
}//for循环
}
//完成分块上传
endUploading (result,reject,filesnum) {
let data = this.PartNumberETag
let paramsData = {uploadId:this.uploadId}
this.http.post(`/api/CompleteMultipartUpload/drives/${this.objectName}`,data,{params:paramsData}).subscribe(data=>{
result("成功了")
this.filesTag.push(data)
if(this.filesTag.length == filesnum){
alert("文件夹全部上传完毕")
//当全部循环完毕重新加载列表
// this.getALLFileList(this.selectedDataBank)
}
this.uploadProgress = 0;
this.uploadisLoading = false
this.PartNumberETag =[] //清空保存返回的信息
})
}
}

4
src/app/navigation/navigation.component.ts
Unescape View File

@ -83,11 +83,11 @@ export class NavigationComponent implements OnInit {
getAllDataBank(){
this.http.get('/api/DataBanks').subscribe(data => {
this.allDataBank = data
console.log(123,data)
// console.log(123,data)
}
,
err=>{
console.log(456,err)
// console.log(456,err)
})
}
//点击资料库

18
src/app/ui/all-file/all-file.component.html
Unescape View File

@ -20,7 +20,7 @@
<div class="newFile" (click)="createFolder()" *ngIf="downloadFile.isLogin">
<mat-icon>create_new_folder</mat-icon> <span>新建文件夹</span>
</div>
<div class="newFile" style="width: 88px;" *ngIf="isDelete" (click)='downLoadFile()'>
<div class="newFile" style="width: 88px;" (click)='downLoadFile()'>
<mat-icon>save_alt</mat-icon> <span>下载</span>
</div>
<div class="newFile" style="width: 88px;" *ngIf="isDelete && downloadFile.isLogin" (click)="deleteFiles()">
@ -29,24 +29,30 @@
<div class="progressBox" *ngIf="uploadisLoading">
<button mat-raised-button style="margin-right: 5px;width: 84px;height: 33px;">取消上传</button>
<button mat-raised-button style="margin-right: 5px;width: 84px;height: 33px;" (click)="cancel()">取消上传</button>
<span style="font-size: 12px;">上传中...</span>
<mat-progress-bar mode="determinate" [value]="uploadProgress" class="progress"></mat-progress-bar>
</div>
</div>
<div class="progressBox" *ngIf="uploadisLoading2">
<button mat-raised-button style="margin-right: 5px;width: 84px;height: 33px;" (click)="cancel2()">取消上传</button>
<span style="font-size: 12px;">文件夹上传中...(当前上传 {{uploadProgress2}} )</span>
<mat-spinner determinate style="position: absolute;right: 0;right: 260px;bottom: -10px;" diameter=40></mat-spinner>
</div>
<div class="progressBox" *ngIf="downloadFile.isDownloading">
<!-- <button mat-raised-button style="margin-right: 5px;" (click)="cancelDowload()">取消下载</button> -->
<span style="font-size: 12px;">下载中...</span>
<mat-progress-bar mode="determinate" [value]="downloadFile.downloadProgress" class="progress" style="left: 52px;top: 13px;"></mat-progress-bar>
</div>
</div>
<div class="rightbox">
<!-- <div class="rightbox">
<div class="inputbox">
<input type="text" [(ngModel)]="searchData" (focus)="searchfocus($event)" (blur)="searchblur($event)">
<span class="cancel" *ngIf="isCancel" (click)="cancelbtn()"><mat-icon style="font-size: 16px;">cancel</mat-icon></span>
<span class="search" (click)="search()"><mat-icon>search</mat-icon></span>
</div>
</div>
</div> -->
</div>
<div class="titlebox">
<div class="titleleft">

226
src/app/ui/all-file/all-file.component.ts
Unescape View File

@ -1,4 +1,4 @@
import { Component, OnInit,ViewChild ,Inject} from '@angular/core';
import { Component, OnInit,ViewChild ,Inject,NgZone } from '@angular/core';
import { SelectionModel } from '@angular/cdk/collections';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
@ -15,8 +15,8 @@ import { async } from '@angular/core/testing';
export class AllFileComponent {
displayedColumns: string[] = ['select', 'name', 'weight', 'time'];
dataSource:any = new MatTableDataSource;
constructor(private http: HttpClient,public snackBar: MatSnackBar,public downloadFile:IsLoginService,public dialog: MatDialog) { }
constructor(private http: HttpClient,public snackBar: MatSnackBar,public downloadFile:IsLoginService,public dialog: MatDialog,private zone: NgZone) { }
isCancel:boolean = false //搜索框的X是否显示
searchData:any = "搜索您的文件" //搜索框内容
isClickFile:boolean = false //是否点击过文件
@ -82,7 +82,7 @@ export class AllFileComponent {
params:paramsdata
}).subscribe((data:any) => {
console.log(data)
// console.log(data)
this.oldDataSource = data.contents //保存表格数据
data.contents.forEach((item)=>{
let typeArr = item.key.split('.')
@ -171,12 +171,12 @@ export class AllFileComponent {
);
}else if(item.type == "pdf"){
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('该文件类型暂不支持在线查看，请下载查看','确定',config)
// const config = new MatSnackBarConfig();
// config.verticalPosition = 'top';
// config.duration = 3000
// this.snackBar.open('该文件类型暂不支持在线查看，请下载查看','确定',config)
// "/api/Objects/drives/" + this.data.url
// window.open("/api/Objects/drives/" + item.key)
window.open("/api/Objects/drives/" + item.key)
// const dialogRef = this.dialog.open(ViewDetails, {//调用open方法打开对话框并且携带参数过去
// width: '1600px',
// height:'900px',
@ -189,7 +189,6 @@ export class AllFileComponent {
}else if (item.isDir) {
this.selectedDataBank = item.key.substring(0, item.key.length - 1)
this.getALLFileList(this.selectedDataBank)
}else{
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
@ -252,7 +251,6 @@ export class AllFileComponent {
//上传文件夹
async selectFiles (e) {
this.fileArr = e.target.files || null //上传的文件
let _this = this
for (var i = 0;i < this.fileArr.length; i++) {
let f = this.fileArr[i];
@ -262,12 +260,151 @@ export class AllFileComponent {
let filesnum = _this.fileArr.length
let result = await new Promise ((result,reject)=>{
this.downloadFile.startUploading(f,adddress,result,reject,filesnum)
this.startUploading2(f,adddress,result,reject,filesnum,this.selectedDataBank)
})
}
}
//上传文件
objectName2:any //上传对象名
uploadisLoading2:boolean = false //上传进度条显示
uploadProgress2:any
uploadId2:any; //上传分块上传事件编号
filesTag2:any = [] //每上传成功一个文件就往里面加一个标识
//e是上传的文件 selectedDataBank是需要上传的地址 包括 XXX资料库 + 文件夹路径
startUploading2 (e,selectedDataBank,result,reject,filesnum,selectedDataBank2) {
let file = e || null //获取上传的文件
let fileSize = file.size || null //上传文件的总大小
let shardSize = 5 * 1024 * 1024 //5MB一个分片
this.uploadisLoading2 = true
this.uploadProgress2 = 0 + "/" + filesnum
if (file && fileSize<=shardSize) { //上传文件<=5MB时
// console.log(selectedDataBank)
let formData = new FormData()
formData.append("file",file)
this.http.post(`/api/Objects/drives/${selectedDataBank2}`,formData).subscribe((data:any)=>{
this.objectName2 = data.objectName
this.filesTag2.push("data")
this.zone.run(() => {
　　setTimeout(() => this.uploadProgress2 = this.filesTag2.length + "/" + filesnum, 0);
});
result("成功了")
if(this.filesTag2.length == filesnum){
this.filesTag2 = [] //清空计数文件夹
this.uploadProgress2 = filesnum + "/" + filesnum
this.uploadisLoading2 = false
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('文件夹全部上传完毕','确定',config)
// 当全部循环完毕重新加载列表
this.getALLFileList(selectedDataBank2)
}
})
} else if (file && fileSize>shardSize) { //上传文件>5MB时,分块上传
let data = {filename: file.name}
this.uploadisLoading2 = true
this.http.post(`/api/NewMultipartUpload/drives/${selectedDataBank}`,{},{params:data}).subscribe((data:any)=>{ //初始化分段上传
this.objectName2 = data.objectName
this.uploadId2 = data.uploadId
this.subsectionUploading2(e,result,reject,filesnum,selectedDataBank2)
})
}
}
PartNumberETag2:any=[]; //每次返回需要保存的信息
//开始分段上传
async subsectionUploading2 (e,result,reject,filesnum,selectedDataBank2) {
let file = e || null //获取上传的文件
let fileSize = file.size || null //上传文件的总大小
let shardSize = 5 * 1024 * 1024 //5MB一个分片
let allSlice = Math.ceil(fileSize / shardSize) //总文件/5MB===共分多少段
let _result = result
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.objectName2}?uploadId=${this.uploadId2}&partNumber=${i+1}`,formData).subscribe((data:any)=>{
let msg = {
"partNumber":data.partNumber || null,
"eTag": data.eTag || null}
resolve(msg) // 调用 promise 内置方法处理成功
})
});
this.PartNumberETag2.push(result)
if (this.PartNumberETag2.length === allSlice) {
this.endUploading2(_result,reject,filesnum,selectedDataBank2)}
}//for循环
}
//完成分块上传
endUploading2 (result,reject,filesnum,selectedDataBank2) {
let data = this.PartNumberETag2
let paramsData = {uploadId:this.uploadId2}
this.http.post(`/api/CompleteMultipartUpload/drives/${this.objectName2}`,data,{params:paramsData}).subscribe(data=>{
this.filesTag2.push("data")
this.zone.run(() => {
　　setTimeout(() => this.uploadProgress2 = this.filesTag2.length + "/" + filesnum, 0);
});
result("成功了")
if(this.filesTag2.length == filesnum){
this.uploadProgress2 = filesnum + "/" + filesnum
this.uploadisLoading2 = false
this.filesTag2 = [] //清空计数文件夹
this.getALLFileList(selectedDataBank2)
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('文件夹全部上传完毕','确定',config)
}
this.PartNumberETag2 =[] //清空保存返回的信息
})
}
//取消分块上传
cancel2 () {
this.http.delete(`/api/MultipartUpload/drives/${this.objectName2}?uploadId=${this.uploadId2}`).subscribe(data=>{
this.uploadisLoading2= false
this.PartNumberETag2 =[] //清空保存返回的信息
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('取消上传成功!','确定',config);
})
}
@ -284,8 +421,7 @@ export class AllFileComponent {
config.duration = 3000
this.snackBar.open('新建文件夹成功','确定',config)
})
} //if
}
});
}
@ -374,17 +510,17 @@ export class AllFileComponent {
//完成分块上传
endUploading () {
let data = this.PartNumberETag
let paramsData = {uploadId:this.uploadId}
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.getALLFileList(this.selectedDataBank);
this.uploadProgress = 0;
this.uploadisLoading = false
this.PartNumberETag =[] //清空保存返回的信息
this.uploadisLoading = false;
this.PartNumberETag =[]; //清空保存返回的信息
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('上传成功','确定',config)
config.duration = 3000;
this.snackBar.open('上传成功','确定',config);
})
}
@ -392,11 +528,11 @@ export class AllFileComponent {
cancel () {
this.http.delete(`/api/MultipartUpload/drives/${this.objectName}?uploadId=${this.uploadId}`).subscribe(data=>{
this.uploadProgress = 0;
this.uploadisLoading= false
this.PartNumberETag =[] //清空保存返回的信息
this.uploadisLoading = false;
this.PartNumberETag = []; //清空保存返回的信息
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
config.duration = 3000;
this.snackBar.open('取消上传成功!','确定',config);
})
}
@ -488,19 +624,33 @@ export class AllFileComponent {
selectDownloadFile:any; //选择下载的文件
download:any; //下载文件元数据
downloadisLoading:boolean = false; //进度条loading加载
downloadProgress:number=0; //进度条进度
downloadProgress:number = 0; //进度条进度
downLoadFile(){
if (this.selection.selected.length === 1) {
this.selectDownloadFile = this.selection.selected[0]
this.http.get('/api/ObjectMetadata/drives/' + this.selectDownloadFile.key).subscribe(data=>{
this.download = data
this.downloadFile.download(this.download)
})
if(this.selectDownloadFile.isDir){
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('文件夹不支持下载','确定',config)
}else{
this.http.get('/api/ObjectMetadata/drives/' + this.selectDownloadFile.key).subscribe(data=>{
// console.log(data)
this.download = data
this.downloadFile.download(this.download)
})
}
} else if (this.selection.selected.length>1) {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('暂时不支持批量下载','确定',config)
} else if (this.selection.selected.length == 0) {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('请选择要下载的文件','确定',config)
}
}
@ -547,15 +697,15 @@ export class FolderDialog {
}
ngOnInit(): void {
// var myDate = new Date();
// var year = myDate.getFullYear();
// var month = myDate.getMonth();
// var day = myDate.getDate();
// var hour = myDate.getHours(); //获取当前小时数(0-23)
// var minutes = myDate.getMinutes(); //获取当前分钟数(0-59)
// var seconds = myDate.getSeconds(); //获取当前秒数(0-59)
// var data = year + '' + month + day + hour + minutes + seconds
// this.newFolderName = "新建文件夹_" + data;
var myDate = new Date();
var year = myDate.getFullYear();
var month = myDate.getMonth();
var day = myDate.getDate();
var hour = myDate.getHours(); //获取当前小时数(0-23)
var minutes = myDate.getMinutes(); //获取当前分钟数(0-59)
var seconds = myDate.getSeconds(); //获取当前秒数(0-59)
var data = year + '' + month + day + hour + minutes + seconds
this.newFolderName = "新建文件夹_" + data;
}
onSubmit(value){

Write Preview
Loading…
Cancel
Save