مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

کاربر سایت

payam64

عضویت از 1397/01/14

مشکل در ایجاد progressbar برای آپلود تصاویر

  • شنبه 24 آذر 1397
  • 15:32
تشکر میکنم

من با استفاده از 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 گذاشتم تا خیلی بیشتر طول بکشه

پاسخ های این پرسش

تعداد پاسخ ها : 0 پاسخ
در حال حاضر هیچ پاسخی ارسال نشده است
کاربرانی که از این پست تشکر کرده اند

هیچ کاربری تا کنون از این پست تشکر نکرده است

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید

با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)