ANGULAR：如何從后端獲取視頻，在標頭中發送 jwt 令牌

Question

希望你們都做得很好，我遇到了 Angular 的真正問題

后端給我發一個 object 包含一個 Arrays 的 url 附件（圖像或視頻）：

attachments:[{
    id: 4
    title: "d439e68f-ece6-4d80-a0b7-111fb337a8e6.jpeg"
    content: null
    file: "http://api-coldplace-dev.piman-analytics.fr/api/tutorial/4/attachments/4"
    type: "image"
    mime: "image/jpeg"
    duration: 0
    order: 0
    cover: 0
    external_link: 0
    },{
    id: 5
    title: "file_example_MP4_480_1_5MG.mp4"
    content: null
    file: "http://api-coldplace-dev.piman-analytics.fr/api/tutorial/4/attachments/5"
    type: "video"
    mime: "video/mp4"
    duration: 31
    order: 1
    cover: 0
    external_link: 0
}]

要獲得該附件，您必須使用另一個 http 請求 GET 到 url （附件.file ）在該請求的附件中發送 ZCFD61B8A7397FA7C10B2AE548F5BFAFZ 令牌（安全）。

例子

響應示例

我用安全的 pipe 做到這一點

HTML：

 <img *ngIf="file?.type?.toString()?.includes('image')"
                       [src]="file?.source | secure | async "
                       height="70px"
                       width="70px"/>
 <video *ngIf="file?.type?.toString()?.includes('video')"
                         height="70px"
                         width="70px"
                         [src]="file?.source | secure | async"
                         (loadedmetadata)="getDuration($event, i)">

PIPE：

@Pipe({
  name: 'secure'
})
export class SecurePipe implements PipeTransform {

  constructor(private http: HttpClient, private sanitizer: DomSanitizer) { }

  transform(url): Observable<SafeUrl> {
    return this.http
      .get(url, { responseType: 'blob' })
      .map(val => this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(val)));
  }

}

我的問題是所有這些僅適用於圖像類型的文件附件，當它是視頻時，請求總是失敗

示例：視頻請求

失敗的

我不知道類型視頻，我必須用其他方式或類似的東西，但我確定問題不是來自后端，因為我在 postman 測試，我總是得到視頻

任何幫助，請

Answer 1

一切看起來都很好。 但在某些情況下， blob.data會為您提供實際的 stream。 試試這個。

URL.createObjectURL(val.data) // assign val:any if neccessary

試試這個視頻。 如果這可行，您必須在 pipe 中放入條件邏輯。