浏览代码

feat: new lib/storage with hwobs

未来全栈 3 月之前
父节点
当前提交
d0c52cb400

+ 8 - 2
src/app/tab3/tab3.page.html

@@ -12,8 +12,14 @@
   <ion-button routerLink="/face/feat68">面部向量RAG</ion-button>
   <ion-button routerLink="/story/hangzhou">RAG:杭州人才政策</ion-button>
   
+  <h1>轮播图示例</h1>
   <comp-swiper [list]="imageList" style="height:200px"></comp-swiper>
-  
-  <comp-swiper [list]="imageList2" [options]="{ direction: 'vertical'}" style="height:200px"></comp-swiper>
+  <!-- <comp-swiper [list]="imageList2" [options]="{ direction: 'vertical'}" style="height:200px"></comp-swiper> -->
+
+  <h1>上传组件示例</h1>
+  <comp-uploader-hwobs [url]="uploadUrl" (onUrlChange)="onUrlChange($event)"></comp-uploader-hwobs>
+  @if(uploadUrl){
+    <span>已上传:{{uploadUrl}}</span>
+  }
 
 </ion-content>

+ 9 - 1
src/app/tab3/tab3.page.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { IonHeader, IonButton, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
 import { RouterModule } from '@angular/router';
 import { CompSwiperComponent } from 'src/lib/comp-swiper/comp-swiper.component';
+import { CompUploaderHwobsComponent } from 'src/lib/storage/comp-uploader-hwobs/comp-uploader-hwobs.component';
 
 @Component({
   selector: 'app-tab3',
@@ -11,7 +12,7 @@ import { CompSwiperComponent } from 'src/lib/comp-swiper/comp-swiper.component';
   imports: [
     IonHeader, IonToolbar, IonTitle, IonContent, 
     IonButton, RouterModule,
-    CompSwiperComponent
+    CompSwiperComponent,CompUploaderHwobsComponent
   ],
 })
 export class Tab3Page {
@@ -24,4 +25,11 @@ export class Tab3Page {
     {img:"https://www.itbaizhan.com/wiki/imgs/image-20220218143925861.png"},
   ]
   constructor() {}
+
+  // 上传组件
+  uploadUrl:string = ""
+  onUrlChange(ev:any){
+    console.log(ev);
+    this.uploadUrl=ev;
+  }
 }

+ 4 - 0
src/lib/storage/comp-uploader-hwobs/comp-uploader-hwobs.component.html

@@ -0,0 +1,4 @@
+<!-- 文件选择器 Input -->
+<h1>请选择文件:</h1>
+<input type="file" multiple (change)="onFileChange($event)"/>
+<button (click)="upload()">上传</button>

+ 0 - 0
src/lib/storage/comp-uploader-hwobs/comp-uploader-hwobs.component.scss


+ 22 - 0
src/lib/storage/comp-uploader-hwobs/comp-uploader-hwobs.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { CompUploaderHwobsComponent } from './comp-uploader-hwobs.component';
+
+describe('CompUploaderHwobsComponent', () => {
+  let component: CompUploaderHwobsComponent;
+  let fixture: ComponentFixture<CompUploaderHwobsComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [CompUploaderHwobsComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CompUploaderHwobsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

+ 66 - 0
src/lib/storage/comp-uploader-hwobs/comp-uploader-hwobs.component.ts

@@ -0,0 +1,66 @@
+import { Component, OnInit,Input,Output,EventEmitter } from '@angular/core';
+import { HwobsProvider } from '../hwobs.service';
+
+@Component({
+  selector: 'comp-uploader-hwobs',
+  templateUrl: './comp-uploader-hwobs.component.html',
+  styleUrls: ['./comp-uploader-hwobs.component.scss'],
+  standalone: true,
+})
+export class CompUploaderHwobsComponent  implements OnInit {
+
+  @Input() url:string = "";
+  @Output() onUrlChange:EventEmitter<string> = new EventEmitter<string>()
+
+  uploader:HwobsProvider|undefined
+  constructor() { }
+
+  ngOnInit() {
+    this.uploader = new HwobsProvider({
+      bucketName:"nova-cloud",
+      prefix:"dev/jxnu/storage/",
+      host:"https://app.fmode.cn/",
+      access_key_id:"XSUWJSVMZNHLWFAINRZ1",
+      secret_access_key:"P4TyfwfDovVNqz08tI1IXoLWXyEOSTKJRVlsGcV6"
+    });
+  }
+
+  file:File|undefined
+  fileData:any = ""
+  fileList:File[] = []
+
+  async upload(){
+    let filename = this.file?.name;
+    let dateStr = `${new Date().getFullYear()}${new Date().getMonth()+1}${new Date().getDate()}`;
+    let hourStr = `${new Date().getHours()}${new Date().getMinutes()+1}${new Date().getSeconds()}`;
+    let key = `${dateStr}/${hourStr}-${filename}`;
+    // let key = `storage/${filename}`
+    if(this.file){
+      let attachment = await this.uploader?.uploadFile(this.file,key);
+      console.log(attachment);
+      this.url = attachment?.get("url");
+      this.onUrlChange.emit(this.url);
+    }
+  }
+  /**
+   * 文件选择器 选择文件触发事件
+   * @param event 
+   */
+  async onFileChange(event:any){
+    console.log(event)
+    // 将选择的文件列表,赋值给fileList
+    this.fileList = event?.target?.files;
+    // 默认将第一个文件,显示在展示区域
+    this.setFile(event?.target?.files?.[0]);
+  }
+
+  /**
+   * 设置展示区域文件
+   * @param file 
+   */
+  async setFile(file:any){
+    // 将文件设置为展示区域文件
+    this.file = file
+  }
+
+}

+ 5 - 3
src/lib/storage/hwobs.service.ts

@@ -28,10 +28,10 @@ export interface HwobsFile{
 }
 
 /**
- * HwobsService 华为OBS文件服务
+ * HwobsProvider 华为OBS文件服务
  * @public
  */
-export class HwobsService {
+export class HwobsProvider {
   obsClient:ObsClient
   bucketName:string
   host:string
@@ -97,6 +97,7 @@ export class HwobsService {
    * @returns 
    */
   async uploadFile(file:File,key:string):Promise<Parse.Object>{
+    console.log(this.globalPrefix,key)
     // key 文件上传后的全部路径
     // /storage/<公司账套>/<应用名称>/年月日/<文件名>.<文件后缀>
     // /storage/web2023/<学号>/年月日/<文件名>.<文件后缀>
@@ -113,7 +114,7 @@ export class HwobsService {
                     reject(err)
               }else{
                 console.log('Status-->' + result.CommonMsg.Status);
-                let attach = await this.saveAttachment(file,key)
+                let attach = await this.saveAttachment(file,this.globalPrefix+key)
                 resolve(attach)
               }
         });
@@ -134,6 +135,7 @@ export class HwobsService {
     return attach
   }
   async saveAttachment(file:File,key:string){
+    console.log("saveAttachment",key)
     let hash = await this.getFileHash(file)
     let attach = await this.checkFileExists(file)
     attach.set("name",file.name)