Практика прямой передачи файлов OSS (3): Angular

JavaScript Angular.js

предисловие

существует«Практика прямой передачи файлов OSS (1): сервер»В этой статье объясняется, как создать сертификат прямой передачи на стороне сервера для прямой передачи OSS на стороне клиента.В этой статье объясняется общий процесс передачи файлов непосредственно в OSS на веб-странице с использованием платформы Angular. Использование функции загрузки в 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)'uploader'а также<input #uploader type="file" />серединаuploaderвести переписку. (2)!является ненулевым утверждением. ​

После нажатия связанной кнопки для выбора файла вызовитеshowFileспособ просмотра выбранного файла. ​

загрузить файлы

После получения файла и загрузки сертификата выполняется процесс загрузки. Здесь следует отметить, что при добавлении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)
    })
  }
}
Категории