Browse Source

feat: upload with aliyun oss

MetaPunkGames 8 months ago
parent
commit
f51296fc88

File diff suppressed because it is too large
+ 370 - 101
package-lock.json


+ 2 - 0
package.json

@@ -24,6 +24,7 @@
     "@ionic/angular": "^8.2.2",
     "@ngx-translate/core": "^15.0.0",
     "@types/parse": "^3.0.9",
+    "ali-oss": "^6.20.0",
     "ng-zorro-antd": "^18.0.0",
     "parse": "^5.1.0",
     "rxjs": "~7.8.0",
@@ -35,6 +36,7 @@
     "@angular/cli": "^18.0.4",
     "@angular/compiler-cli": "^18.0.0",
     "@ionic/angular-toolkit": "latest",
+    "@types/ali-oss": "^6.16.11",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",

+ 32 - 5
projects/textbook/src/app/comp-upload/comp-upload.component.ts

@@ -3,6 +3,8 @@ import { NzUploadModule } from 'ng-zorro-antd/upload';
 import { CommonCompModule } from '../../services/common.modules';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { NzUploadChangeParam, NzUploadFile } from 'ng-zorro-antd/upload';
+import { ProvierOssAli } from './provider-oss-aliyun';
+
 @Component({
   selector: 'app-comp-upload',
   standalone: true,
@@ -24,7 +26,10 @@ export class CompUploadComponent implements OnInit {
     //   url: 'http://www.baidu.com/xxx.png'
     // },
   ];
-  constructor(private msg: NzMessageService) {}
+  ossProvider:{upload:any}|undefined
+  constructor(private msg: NzMessageService) {
+    this.ossProvider = new ProvierOssAli()
+  }
 
   ngOnInit() {
     this.fileList = this.files.map((item:any)=> {
@@ -33,16 +38,38 @@ export class CompUploadComponent implements OnInit {
       }
     })
   }
-  handleChange(info: NzUploadChangeParam): void {
+  async handleChange(info: NzUploadChangeParam) {
     console.log(info);
     if (info.file.status !== 'uploading') {
+      // 选择文件后,自动开始上传
       console.log(info.file, info.fileList);
+      let ossFileList = await this.uploadAllFileList(info?.fileList)
+      this.change.emit(ossFileList?.map(item=>item?.url))
     }
     if (info.file.status === 'done') {
-      this.msg.success(`${info.file.name} file uploaded successfully`);
+      // this.msg.success(`${info.file.name} file uploaded successfully`);
     } else if (info.file.status === 'error') {
-      this.msg.error(`${info.file.name} file upload failed.`);
+      // this.msg.error(`${info.file.name} file upload failed.`);
+    }
+
+    // this.change.emit(info.fileList)
+  }
+
+  async uploadAllFileList(fileList:Array<NzUploadFile>){
+    let ossFileList = []
+    for (let index = 0; index < fileList.length; index++) {
+      let file = fileList[index];
+      if(file){
+        let ossFile 
+        try{
+          ossFile = await this.ossProvider?.upload(file?.originFileObj);
+        }catch(err){}
+        if(ossFile){
+          ossFileList.push(ossFile)
+        }
+      }
     }
-    this.change.emit(info.fileList)
+    console.log(ossFileList)
+    return ossFileList
   }
 }

+ 37 - 0
projects/textbook/src/app/comp-upload/provider-oss-aliyun.ts

@@ -0,0 +1,37 @@
+import OSS from "ali-oss";
+import Parse from "parse";
+
+
+export class ProvierOssAli{
+    client:OSS|undefined
+    async initClient(){
+        if(this.client) return
+        // 获取STS临时口令
+        let result:any = await Parse.Cloud.run("aliOssSTS");
+        this.client = new OSS({
+            // yourRegion填写Bucket所在地域。以华东1(杭州)为例,yourRegion填写为oss-cn-hangzhou。
+            region: "oss-cn-beijing",
+            // 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。
+            accessKeyId: result?.AccessKeyId,
+            accessKeySecret: result?.AccessKeySecret,
+            // 从STS服务获取的安全令牌(SecurityToken)。
+            stsToken: result?.SecurityToken,
+            // 填写Bucket名称。
+            bucket: result?.ALI_OSS_BUCKET || "hep-textbook",
+        });
+    }
+    constructor(){
+    }
+
+    async upload(file:File,onProcess:Function){
+        await this.initClient();
+        let now = new Date();
+        let fname = `${Parse.User.current()?.id}/${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()}/${now.getTime()}-${file?.name}`;
+        const r1 = await this.client?.put(fname, file);
+        console.log(file)
+        console.log('put success: %j', r1);
+        return r1
+
+    }
+
+}

+ 1 - 0
server/cloud/aliyun/func-aliyun-oss.js

@@ -45,6 +45,7 @@ function getAliyunOssAccessToken(){
     // }`, '3600', 'SessionTest' )
     // return result.credentials
     return {
+        bucket: ALI_OSS_BUCKET,
         AccessKeyId: ALI_OSS_ACCESS_KEY_ID,
         AccessKeySecret:ALI_OSS_ACCESS_KEY_SECRET,
         SecurityToken: null,

Some files were not shown because too many files changed in this diff