Browse Source

[完善]Objects获取桶名

beijing
邵佳豪 2 years ago
parent
commit
0b38480a0c
  1. 7
      proxy.config.json
  2. 3
      src/app/pages/home-page/home-page.component.html
  3. 172
      src/app/service/objects.service.ts
  4. 187
      src/app/service/objectsSimple.service.ts

7
proxy.config.json

@ -1,13 +1,16 @@
{
"/api": {
"target": "https://znaq.sinochemoilmarketing.com/",
"target": "http://121.36.37.70:8906/",
"测试": "http://121.36.37.70:8906/",
"测试2": "https://znaq.sinochemoilmarketing.com/",
"测试3": "https://gas.anxincloud.cn/",
"secure": false,
"changeOrigin": true
},
"/signalr": {
"target": "https://znaq.sinochemoilmarketing.com/",
"target": "http://121.36.37.70:8906/",
"测试": "http://121.36.37.70:8906/",
"测试2": "https://znaq.sinochemoilmarketing.com/",
"secure": false,
"ws": true,
"logLevel": "debug"

3
src/app/pages/home-page/home-page.component.html

@ -1,4 +1,5 @@
<div class="homepagebox">
<div class="informbox">
<div class="warningnumber">
<img src="../../../assets/images/warningnum.png" alt="">
@ -31,6 +32,7 @@
</div>
</div>
</div>
<div class="centerbox">
<div class="leftbox">
<div class="title">
@ -222,6 +224,7 @@
</div>
</div>
</div>
<div class="bottombox">
<div class="bottomitem">
<div class="title" style="padding-left: 20px;">

172
src/app/service/objects.service.ts

@ -1,6 +1,6 @@
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
/**
*
@ -18,21 +18,20 @@ enum EnvironmentType {
*
*/
Production,
}
@Injectable({
providedIn: 'root'
providedIn: "root",
})
export class ObjectsService {
static readonly c_apiRoot = "/api/Objects/";//普通上传的API根路径
static readonly c_apiRoot_Multipart = "/api/";//分块上传的API根路径
static readonly c_apiRoot = "/api/Objects/"; //普通上传的API根路径
static readonly c_apiRoot_Multipart = "/api/"; //分块上传的API根路径
/**
*
*/
static currentEnvironmentType: EnvironmentType = EnvironmentType.DevelopEditor;
static currentEnvironmentType: EnvironmentType =
EnvironmentType.DevelopEditor;
/**
* +
@ -43,7 +42,7 @@ export class ObjectsService {
*
* @param extensionPath ,
* 1 extensionPath = ceshi/assets//outDoor/a.gltf /api/Objects/{}/ceshi/assets//outDoor/a.gltf
* 2extensionPath = ceshi/web/a.rgb /api/Objects/{}/ceshi/web/a.rgb
* 2extensionPath = ceshi/web/a.rgb /api/Objects/{}/ceshi/web/a.rgb
*/
static getFullPath(extensionPath: string) {
return ObjectsService.baseUrl + extensionPath;
@ -54,11 +53,10 @@ export class ObjectsService {
*/
obsRootByEnv = new Map<EnvironmentType, string>([
[EnvironmentType.DevelopEditor, "sinochemweb/"], //开发与编辑
[EnvironmentType.Test, "sinochemweb/"],//测试
[EnvironmentType.Production, "sinochemweb/"],//生产环境(根据需要设置)最好是与测试环境的桶名相同
[EnvironmentType.Test, "sinochemweb/"], //测试
[EnvironmentType.Production, "sinochemweb/"], //生产环境(根据需要设置)最好是与测试环境的桶名相同
]);
constructor(private http: HttpClient) {
let bucketName = this.getBucketName();
ObjectsService.baseUrl = ObjectsService.c_apiRoot + bucketName;
@ -68,18 +66,35 @@ export class ObjectsService {
*
*/
getBucketName() {
return this.obsRootByEnv.get(ObjectsService.currentEnvironmentType);
// return this.obsRootByEnv.get(ObjectsService.currentEnvironmentType);
let bucket = "";
if (
window.location.host.indexOf("sinochemoilmarketing") != -1 ||
window.location.host.indexOf("121.36.37.70") != -1
) {
bucket = "sinochemweb/";
} else if (window.location.host.indexOf("anxincloud") != -1) {
bucket = "gas/";
} else {
bucket = "sinochemweb/";
}
return bucket;
}
/**
* 5M
*/
postFile(extensionPath: string, file: File): Observable<Object> {
let formData = new FormData()
formData.append("file", file, file.name)
let data = { keepOriginalName: 'true' }
return this.http.post(ObjectsService.getFullPath(extensionPath), formData, { params: data });
let formData = new FormData();
formData.append("file", file, file.name);
let data = { keepOriginalName: "true" };
return this.http.post(
ObjectsService.c_apiRoot + this.getBucketName() + extensionPath,
formData,
{
params: data,
}
);
}
//分块上传
@ -87,53 +102,78 @@ export class ObjectsService {
// let formData = new FormData()
// formData.append("file", file, file.name)
// return this.http.post(ObjectsService.baseUrl + extensionPath, formData);
let data = { keepOriginalName: 'true', filename: file.name }
let data = { keepOriginalName: "true", filename: file.name };
return new Promise((resolve, reject) => {
this.http.post(ObjectsService.c_apiRoot_Multipart + "NewMultipartUpload/" + this.getBucketName() + extensionPath, {}, { params: data }).subscribe(async (data: any) => { //初始化分段上传
let instance = this;
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(ObjectsService.c_apiRoot_Multipart + `MultipartUpload/${instance.getBucketName()}${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 };
let path = ObjectsService.c_apiRoot_Multipart + `CompleteMultipartUpload/${instance.getBucketName()}` + objectName;
this.http.post(path, data, { params: paramsData }).subscribe(data => {
let objData: any = new Object();
objData.fileName = file.name;
// objData.filePath = (ObjectsService.baseUrl + objectName).replace(file.name, "");//桶名要根据当前环境动态组装
objData.filePath = objectName;//此路径不全,前面缺少ObjectsService.baseUrl,这部分不可序列化,要在运行时拼接
resolve(objData)
})
}
}//for循环
//分块 处理
})
})
this.http
.post(
ObjectsService.c_apiRoot_Multipart +
"NewMultipartUpload/" +
this.getBucketName() +
extensionPath,
{},
{ params: data }
)
.subscribe(async (data: any) => {
//初始化分段上传
let instance = this;
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(
ObjectsService.c_apiRoot_Multipart +
`MultipartUpload/${instance.getBucketName()}${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 };
let path =
ObjectsService.c_apiRoot_Multipart +
`CompleteMultipartUpload/${instance.getBucketName()}` +
objectName;
this.http
.post(path, data, { params: paramsData })
.subscribe((data) => {
let objData: any = new Object();
objData.fileName = file.name;
// objData.filePath = (ObjectsService.baseUrl + objectName).replace(file.name, "");//桶名要根据当前环境动态组装
objData.filePath = objectName; //此路径不全,前面缺少ObjectsService.baseUrl,这部分不可序列化,要在运行时拼接
resolve(objData);
});
}
} //for循环
//分块 处理
});
});
}
}

187
src/app/service/objectsSimple.service.ts

@ -1,86 +1,125 @@
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
@Injectable({
providedIn: 'root'
providedIn: "root",
})
export class ObjectsSimpleService {
static readonly c_apiRoot = "/api/"; //普通上传的API根路径
static readonly c_apiRoot_Multipart = "/api/"; //分块上传的API根路径
constructor(private http: HttpClient) {}
static readonly c_apiRoot = "/api/";//普通上传的API根路径
static readonly c_apiRoot_Multipart = "/api/";//分块上传的API根路径
// static testPath = "f1/f2";//测试路径
constructor(private http: HttpClient) { }
//普通上传,单个文件上限5M
static baseUrl = ObjectsSimpleService.c_apiRoot + 'Objects/sinochemweb/';
postFile(extensionPath: string, file: File): Observable<Object> {
let formData = new FormData()
formData.append("file", file, file.name)
let data = { keepOriginalName: 'true' }
return this.http.post(ObjectsSimpleService.baseUrl + extensionPath, formData, { params: data });
static getBucketName() {
let bucket = "";
if (
window.location.host.indexOf("sinochemoilmarketing") != -1 ||
window.location.host.indexOf("121.36.37.70") != -1
) {
bucket = "/sinochemweb/";
} else if (window.location.host.indexOf("anxincloud") != -1) {
bucket = "/gas/";
} else {
bucket = "/sinochemweb/";
}
console.log("Objects桶名", bucket);
return bucket;
}
//普通上传,单个文件上限5M
static baseUrl =
ObjectsSimpleService.c_apiRoot +
"Objects" +
ObjectsSimpleService.getBucketName();
postFile(extensionPath: string, file: File): Observable<Object> {
let formData = new FormData();
formData.append("file", file, file.name);
let data = { keepOriginalName: "true" };
return this.http.post(
ObjectsSimpleService.baseUrl + extensionPath,
formData,
{ params: data }
);
}
//分块上传
static baseUrl_MultipartUpload =
ObjectsSimpleService.c_apiRoot_Multipart +
"NewMultipartUpload" +
ObjectsSimpleService.getBucketName();
postFile_MultipartUpload(extensionPath: string, file: File): Promise<Object> {
// let formData = new FormData()
// formData.append("file", file, file.name)
// return this.http.post(ObjectsSimpleService.baseUrl + extensionPath, formData);
let data = { keepOriginalName: "true", filename: file.name };
return new Promise((resolve, reject) => {
this.http
.post(
ObjectsSimpleService.baseUrl_MultipartUpload + extensionPath,
{},
{ 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===共分多少段
console.log("共分多少段" + allSlice);
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(
ObjectsSimpleService.c_apiRoot_Multipart +
`MultipartUpload` +
+ObjectsSimpleService.getBucketName() +
`${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) {
//分块上传完成
//分块上传
static baseUrl_MultipartUpload = ObjectsSimpleService.c_apiRoot_Multipart + 'NewMultipartUpload/sinochemweb/';
// {
// "objectName": "string",
// "uploadId": "string"
// }
postFile_MultipartUpload(extensionPath: string, file: File): Promise<Object> {
// let formData = new FormData()
// formData.append("file", file, file.name)
// return this.http.post(ObjectsSimpleService.baseUrl + extensionPath, formData);
let data = { keepOriginalName: 'true', filename: file.name }
return new Promise((resolve, reject) => {
this.http.post(ObjectsSimpleService.baseUrl_MultipartUpload + extensionPath, {}, { 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===共分多少段
console.log('共分多少段' + allSlice)
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 data = PartNumberETag;
let paramsData = { uploadId: uploadId };
let path =
ObjectsSimpleService.c_apiRoot_Multipart +
"CompleteMultipartUpload" +
ObjectsSimpleService.getBucketName() +
objectName;
this.http
.post(path, data, { params: paramsData })
.subscribe((data) => {
let objData: any = new Object();
objData.fileName = file.name;
objData.filePath = ObjectsSimpleService.baseUrl + objectName;
resolve(objData);
});
}
} //for循环
//同步写法实现异步调用
let result = await new Promise((resolve, reject) => {
// await 需要后面返回一个 promise 对象
this.http.post(ObjectsSimpleService.c_apiRoot_Multipart + `MultipartUpload/sinochemweb/${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 };
let path = ObjectsSimpleService.c_apiRoot_Multipart + 'CompleteMultipartUpload/sinochemweb/' + objectName;
this.http.post(path, data, { params: paramsData }).subscribe(data => {
let objData: any = new Object();
objData.fileName = file.name;
objData.filePath = ObjectsSimpleService.baseUrl + objectName
resolve(objData)
})
}
}//for循环
//分块 处理
})
})
}
//分块 处理
});
});
}
}

Loading…
Cancel
Save