Angular
Upload
Progress
Angular 上傳進度條使用
const reqVideo = new HttpRequest(
'POST',
'/api/upload/video',
this.videoFile,
{
reportProgress: true,
}
);
this.http.request(reqVideo).subscribe(
// event.type 有 Sent = 0 UploadProgress = 1 DownloadProgress = 3 Response = 4
(event) => {
if (event.type === HttpEventType.UploadProgress) {
console.log(event);
this.uploadVideoPercent = (
(event.loaded / event.total) *
100
).toFixed(2);
console.log(this.uploadVideoPercent);
}
if (event.type === HttpEventType.Response) {
console.log(event);
this.msg.create('success', '上傳影片成功');
this.addVideoData.video = (event.body as any).url; // (event.body as any) 解決 typescript 沒有先設定 property的問題
this.uploadVideoSuccess = true;
this.postVideo();
}
},
(error) => {
console.log(error.message);
this.msg.create('waring', '上傳影片失敗');
}
);