直接ファイル転送のOSSプラクティス（3）：Angular

序文

記事「OSSへの直接フ​​ァイル転送の実践（1）：サーバー側」では、サーバー側でのOSSのクライアント側直接転送用の直接転送証明書を生成する方法を説明しました。OSSを転送する全体的なプロセス。Angularでアップロード機能を使用することは、アプレットで公式にパッケージ化されたアップロード方法を使用するよりも少し複雑です。。

パススルー証明書を取得する

ダイレクトパスクレデンシャルを取得するためのAPIは次のとおりであると想定しています：

GET https://api.xxx.com/upload/token
复制代码

パススルー証明書を要求するプロセスをカプセル化できます（デモンストレーションの便宜のために、すべてのメソッドはapp.component.tsファイル。実際、HTTP要求を含むメソッドは*.service.tsファイルに配置する必要があります）。

// app.component.ts
import { HttpClient } from '@angular/common/http'
import { Component } from '@angular/core'

/** 直传凭证 */
export interface UploadToken {
  key: string
  policy: string
  signature: string
  OSSAccessKeyId: string
  url: string
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor(private http: HttpClient) {}

  token!: UploadToken

  /** 获取直传凭证 */
  getUploadToken() {
    this.http.get('https://api.xxx.com/upload/token').subscribe((data: UploadToken) => {
      this.token = data
    })
  }
}
复制代码

ファイルを選択します

アプレットのwx.chooseMediaメソッド Angularでリソースを取得するパスは少し複雑です。ドキュメント内のファイルのアップロードに使用されるサブコンポーネントを取得してから、を取得する必要があります。その中のファイルパス。。

まず、HTMLテンプレートを定義します。。

// app.component.html
<input #uploader type="file" />
复制代码

これは、ファイルを取得するための入力ボックスです。ここで、はテンプレート名を#uploader表し*.component.ts内のテンプレートを取得するために使用できます。テンプレートは、ViewChildデコレータ。。

import { HttpClient } from '@angular/common/http'
import { Component, ElementRef, ViewChild } from '@angular/core'

/** 直传凭证 */
export interface UploadToken {
  key: string
  policy: string
  signature: string
  OSSAccessKeyId: string
  url: string
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor(private http: HttpClient) {}

  @ViewChild('uploader')
  FileElement!: ElementRef

  token!: UploadToken

  /** 获取直传凭证 */
  getUploadToken() {
    this.http.get('https://api.xxx.com/upload/token').subscribe((data: UploadToken) => {
      this.token = data
    })
  }

  /** 显示第一个文件的路径 */
  showFile() {
    console.log(this.FileElement.nativeElement.files[0])
  }
}

复制代码

コア部分は次のとおりです。

  @ViewChild('uploader')
  FileElement!: ElementRef
复制代码

その中で、各部分の意味は次のとおりです。（1）に対応します。（2）はnull以外のアサーションです。。'uploader'<input #uploader type="file" />uploader!

バインドされたボタンをクリックしてファイルを選択した後、showFileメソッドを表示します。。

ファイルをアップロードする

ファイルを取得して証明書をアップロードした後、アップロードプロセスが実行されます。ここで注意すべきことの1つは、FormData属性に、fileアイテムを最後に配置する必要があるということです。そうしないと、失敗します。。

import { HttpClient } from '@angular/common/http'
import { Component, ElementRef, ViewChild } from '@angular/core'

/** 直传凭证 */
export interface UploadToken {
  key: string
  policy: string
  signature: string
  OSSAccessKeyId: string
  url: string
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor(private http: HttpClient) {}

  @ViewChild('uploader')
  FileElement!: ElementRef

  token!: UploadToken

  /** 获取直传凭证 */
  getUploadToken() {
    this.http.get('https://api.xxx.com/upload/token').subscribe((data: UploadToken) => {
      this.token = data
    })
  }

  /** 显示第一个文件的路径 */
  showFile() {
    console.log(this.FileElement.nativeElement.files[0])
  }

  /** 直传至 OSS */
  upload() {
    const file = this.FileElement.nativeElement.files[0]
    const formData = new FormData()
    formData.append('OSSAccessKeyId', this.token.OSSAccessKeyId)
    formData.append('key', this.token.key)
    formData.append('policy', this.token.policy)
    formData.append('signature', this.token.signature)
    formData.append('file', file)

    this.http.post(this.token.url, formData).subscribe((data: any) => {
      // 打印最终的资源 URL 地址
      console.log(this.token.url + '/' + this.token.key)
    })
  }
}
复制代码