Direct file OSS practice part 3: Angular

preface

This article explains how to generate credentials for client-side direct transmission of OSS on the server side. This article explains the overall process of direct transmission of files to OSS on Web pages using the Angular framework. Uploading in Angular is a little more complicated than using officially packaged upload methods in applets.

Get direct transmission credentials

We assume that the API for obtaining direct pass credentials is:

GET https://api.xxx.com/upload/token
Copy the code

It is possible to encapsulate the process of requesting a direct pass-through credential (all methods are in the app.component.ts file for demonstration purposes, actually methods involving HTTP requests are in the *.service.ts file) :

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

/** Direct transfer certificate */
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/** Get direct credentials */
  getUploadToken() {
    this.http.get('https://api.xxx.com/upload/token').subscribe((data: UploadToken) = > {
      this.token = data
    })
  }
}
Copy the code

Select the file

Getting a resource path in Angular is a bit more complicated than getting it directly in a widget using the wx.Choosemedia method, which requires getting the child component used to upload the file in the document and then getting the file path inside it.

First, define the HTML template.

// app.component.html
<input #uploader type="file" />
Copy the code

This is an input box to get a file, where #uploader represents the template name that can be used to get the template in the *.component.ts file. You need to use the ViewChild decorator to get this template.

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

/** Direct transfer certificate */
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/** Get direct credentials */
  getUploadToken() {
    this.http.get('https://api.xxx.com/upload/token').subscribe((data: UploadToken) = > {
      this.token = data
    })
  }

  /** displays the path of the first file */
  showFile() {
    console.log(this.FileElement.nativeElement.files[0])}}Copy the code

The core parts are:

  @ViewChild('uploader') FileElement! : ElementRefCopy the code

(2)! Is a non-empty assertion.

After clicking the bound button to select the file, call the showFile method to view the selected file.

Upload a file

After obtaining the file and uploading credentials, proceed with the uploading process. One thing to note here is that when adding the FormData attribute, you need to put the file item last, otherwise it will fail.

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

/** Direct transfer certificate */
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/** Get direct credentials */
  getUploadToken() {
    this.http.get('https://api.xxx.com/upload/token').subscribe((data: UploadToken) = > {
      this.token = data
    })
  }

  /** displays the path of the first file */
  showFile() {
    console.log(this.FileElement.nativeElement.files[0])}/** Direct to 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) = > {
      // Prints the final resource URL
      console.log(this.token.url + '/' + this.token.key)
    })
  }
}
Copy the code