ANGULAR:如何从后台获取视频，在标头中发送jwt令牌

Question

希望你们一切顺利，我在Angular 上遇到了一个真正的问题

后端发送给我的对象包含附件(图像或视频(的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 to url(attachment.file(，在该请求的标头中发送jwt令牌(安全附件(。

示例

响应示例

我使用安全管道

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({
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)));
}
}

我的问题是，所有这些都只适用于图像类型的附件，当它是视频时，请求总是失败的

示例：视频请求

失败

我不知道是不是视频类型，我必须用另一种方式或类似的方式，但我确信问题不是来自后端，因为我在邮递员中测试过，我总是得到视频

有什么帮助吗？

Answer 1

一切看起来都很好。但在某些情况下，blob.data会为您提供实际的流。试试看。

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

试试这个视频。如果这有效的话，你就必须把条件逻辑放在你的管道里。