من با استفاده از angular 6 برای آپلود کردن تصاویر میخوام از یک progressbar استفاده کنم که میزان حجم آپلود شده فایل رو به صورت درصدی از کل حجم فایل انتخاب شده نشون بده
برای این کار یک سرویس ایجاد کردم و داخلش از observable های subject تعریف کردم و در نهایت از BrowserXhr برای مقدار پیشترفت آپلود استفاده می کنم یعنی کلاسی تعریف کردم که از BrowserXhr ارث بری میکنه و در نهایت با توجه به آپلود حجم مشخصی از فایل درصدی از میزان حجم آپلود شده رو به حجم کل فایل محاسبه کرده و هر بار مقداری رو به observable ارسال میکنه
در نهایت در کلاس کامپوننت مورد نظر برای نمایش progressbar این observable تعریف شده رو subscribe کردم تا هر بار مقدار حجم آپلود شده رو نمایش بدم
کد سرویس تعریف شده :
@Injectable()
export class ProgressService {
uplaodProgress: Subject<any> = new Subject();
downloadProgress: Subject<any> = new Subject();
constructor(private imageService: ImageService) {
}
}
@Injectable()
export class BrowserXhrWithProgress extends BrowserXhr {
constructor(private progressService: ProgressService){
super();
}
build(): XMLHttpRequest {
var xhr: XMLHttpRequest = super.build();
xhr.onprogress = (event) => {
this.progressService.downloadProgress.next(this.createProgress(event));
};
xhr.upload.onprogress = (event) => {
this.progressService.uplaodProgress.next(this.createProgress(event));
};
return xhr;
}
private createProgress(event){
return {
total: event.total,
percentage: Math.round(event.loaded / event.total * 100)
};
}
}
کد زیر هم مربوط به رویداد change برای input file در کلاس کامپوننت تعریف شده و از سرویس تعریف شده استفاده می کنه :
onUploadPhoto() {
const nativeElement: HTMLInputElement = this.fileInput.nativeElement;
this.progressService.uplaodProgress.subscribe(
(progress: any) => {
this.zone.run(() => {
console.log('progress', progress);
this.progress = progress;
});
}
);
this.imageService.uploadPhoto(this.product.id, nativeElement.files[0])
.subscribe(
(response: any) => {
this.image = response;
this.photos.push(this.image);
}
);
}
مشکل اینجاس که تو کنسول هیچی چاپ نمیشه با توجه به اینکه هر بار مقدار progress رو به کنسول میفرستم و از طرفی مقدار progressbar هم اصلا تغییر نمیکنه البته برای شبیه سازی آپلود تصاویر حجیم من در قسمت network مرورگر سرعت رو روی slow 3g گذاشتم تا خیلی بیشتر طول بکشه