Я хочу, чтобы пользователь обновлялся с помощью индикатора выполнения при загрузке файлов изображений через мое приложение Angular.
В запросе http моего углового компонента я установил для reportProgress значение true, и когда типом события является UploadProgress, вычисляется переменная прогресса (затем переменная прогресса обновляется в пользовательском интерфейсе как индикатор выполнения).
Но индикатор прогресса очень быстро уходит от 0% до 100%. Если загрузка большого количества файлов занимает полные две минуты, индикатор выполнения переключается с 0% до 100% в течение первых 25 секунд или около того. Затем он просто некоторое время остается на уровне 100%, пока не будет получен окончательный ответ от контроллера.
Я погуглил кучу вещей и продолжаю видеть одну и ту же (или очень похожую) идею this.progress = Math.round (100 * event.loaded / event.total). Но это не совсем верно.
await this.http.request("PUT", this.apiAddress + "photo/uploadfiles",
{
body: formData,
observe: "events",
headers: headers,
reportProgress: true
}).subscribe(event => {
if (event.type === HttpEventType.UploadProgress) {
this.progress = Math.round(100 * event.loaded / event.total);
} else if (event.type === HttpEventType.Response) {
const result = event.body as ApiResult<number>;
if (result.success) {
this.addSpinnerPlaceHolders(result.result);
if (result.errors.length > 0)
this.showWarning(result.errors);
hideUploadPhotosModal();
} else {
this.showError(result.errors);
}
}
}, error => {
this.showError("Could not upload photos.");
if (this.hasPhotos)
hideUploadPhotosModal();
}
);
Я хочу, чтобы индикатор выполнения отражал происходящее и достигал 100% только тогда, когда все загружено и выполнено. Чего мне не хватает?