یک نکتهی تکمیلی: گزارش درصد پیشرفت آپلود فایلها توسط HTTP Client جدید Angular
۷ سال و ۱ ماه قبل، سهشنبه ۳۱ مرداد ۱۳۹۶، ساعت ۱۹:۰۵
postTicket(ticket: Ticket, filesList: FileList): Observable<HttpEvent<any>> { //… the same as before const headers = new HttpHeaders().set("Accept", "application/json"); return this.http .post(`${this.baseUrl}/SaveTicket`, formData, { headers: headers, reportProgress: true, observe: "events" }) .map(response => response || {}) .catch((error: HttpErrorResponse) => { console.error("observable error: ", error); return Observable.throw(error.statusText); }); }
postTicket(ticket: Ticket, filesList: FileList): Observable<HttpEvent<any>> {
{ headers: headers, reportProgress: true, observe: "events" }
queueProgress: number; isUploading: boolean; uploadTimeRemaining: number; uploadTimeElapsed: number; uploadSpeed: number; submitForm(form: NgForm) { const fileInput: HTMLInputElement = this.screenshotInput.nativeElement; this.queueProgress = 0; this.isUploading = true; let startTime = Date.now(); this.uploadService.postTicket(this.model, fileInput.files).subscribe( (event: HttpEvent<any>) => { switch (event.type) { case HttpEventType.Sent: startTime = Date.now(); console.log("Request sent!"); break; case HttpEventType.DownloadProgress: case HttpEventType.UploadProgress: if (event.total) { this.queueProgress = Math.round(event.loaded / event.total * 100); const timeElapsed = Date.now() - startTime; const uploadSpeed = event.loaded / (timeElapsed / 1000); this.uploadTimeRemaining = Math.ceil( (event.total - event.loaded) / uploadSpeed ); this.uploadTimeElapsed = Math.ceil(timeElapsed / 1000); this.uploadSpeed = uploadSpeed / 1024 / 1024; } break; case HttpEventType.Response: this.queueProgress = 100; this.isUploading = false; console.log("Done! ResponseBody:", event.body); break; } }, (error: HttpErrorResponse) => { this.isUploading = false; console.log(error); } ); }
<div *ngIf="queueProgress > 0"> <table class="table"> <thead> <tr> <th width="15%">Event</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td><strong>Elapsed time</strong></td> <td nowrap>{{uploadTimeElapsed | number:'.1'}} second(s)</td> </tr> <tr> <td><strong>Remaining time</strong></td> <td nowrap>{{uploadTimeRemaining | number:'.1'}} second(s)</td> </tr> <tr> <td><strong>Upload speed</strong></td> <td nowrap>{{uploadSpeed | number:'.3'}} MB/s</td> </tr> <tr> <td><strong>Queue progress</strong></td> <td> <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100" [attr.aria-valuenow]="queueProgress" [ngStyle]="{ 'width': queueProgress + '%' }"> {{queueProgress}}% </div> </td> </tr> </tbody> </table> </div> <button class="btn btn-primary" [disabled]="form.invalid || isUploading" type="submit">Submit</button>
{ "sdk": { "version": "1.0.4" } }
<ItemGroup> <Content Include="wwwroot\**" /> </ItemGroup>
<PropertyGroup> <TargetFramework>netcoreapp2.0</TargetFramework> <LangVersion>latest</LangVersion> </PropertyGroup>
Unhandled Exception: System.InvalidOperationException: Cannot resolve scoped service from root provider.
namespace ASPNETCoreIdentitySample { public class Program { public static void Main(string[] args) { var host = new WebHostBuilder() // ... .UseDefaultServiceProvider((context, options) => { options.ValidateScopes = context.HostingEnvironment.IsDevelopment(); }) // ... host.Run(); } } }