1

我正在尝试使用 Kendo UI 以角度上传文件。除进度条外，一切正常。上传处理时始终显示为零。我在弹出窗口中使用 Kedno UI 上传。

这是我的父组件parent.component.html

<button kendoButton [primary]="true" (click)="uploadMe(id)">
<app-upload [model]="uploadItem" (cancel)="uploadcancelHandler()"> </app-upload>

parent.component.ts

 public uploadMe (id) {
    this.uploadItem = {
      id: id
    };
  }

上传.component.html

<kendo-upload
      [saveUrl]="saveUrl"
      #dUpload
      [(ngModel)]="myFiles"
      [autoUpload]="false"
      [restrictions]="myRestrictions"
      [withCredentials]="false"
      [disabled]="disme"
      (clear)="clearEventHandler($event)"
      (success)="successEventHandler($event)"
      (upload)="uploadEventHandler($event)"
      (error)="errorEventHandler($event)"
      (select)="selectEventHandler($event)">
 </kendo-upload>

上传.component.ts

saveUrl = "saveUrl";
selectEventHandler(e: SelectEvent) {}
uploadEventHandler(e: UploadEvent) {
}
successEventHandler(e: SuccessEvent) {
}
clearEventHandler(e: ClearEvent) {}

errorEventHandler(e: ErrorEvent) {}

拦截器.ts

intercept (
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
if (req.url === "saveUrl") {
    const headers = new HttpHeaders({ "Content-Type": this.store.content });
    const req = new HttpRequest(
    "PUT",
    this.store.fileurl,
    this.store.actualfile,
    {
        headers: headers,
        reportProgress: true
    }
    );
    return next.handle(req).pipe(
    map((event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) {
        }
        return event;
    }),
    catchError((error: HttpErrorResponse) => {
        return throwError(error);
    })
    );
}

上传部分在弹出窗口中。文件上传成功，但进度条始终为零，不显示进度条数。提前致谢。

4

0 回答 0