1

我在 Angular 8 上工作我遇到问题我无法在订阅数据以获取进度条上传时将事件转换为返回 HttpEventType.Response

组件服务

PostUpload(selectedoptionsId, file)
{
  const formData: FormData = new FormData();
  formData.append('file', file,file.name);
  formData.append('selectedoptions',selectedoptionsId.toString());
 return this.http.post('http://localhost:61265/api/DeliverySys/', formData,{responseType: 'blob'});
}

组件类型脚本

this._dataService.PostUpload(this.selectedoptions.toString(),this.fileToUpload)
     .subscribe((event:any) => {
      if (event.type === HttpEventType.Response) {
          console.log('Upload complete');
    }
    })

event.type 总是在调试器上返回“text/plain”并且事件是 BLOB 所以如何将它转换为返回 HttpEventType.Response

更新原帖

我尝试如下：

this._dataService.PostUpload(this.selectedoptions.toString(),this.fileToUpload)

 .subscribe((event: HttpEvent<any>) => {

  switch (event.type) {

    case HttpEventType.Sent:

      console.log('Request has been made!');

      break;

    case HttpEventType.ResponseHeader:

      console.log('Response header has been received!');

      break;

    case HttpEventType.UploadProgress:

      this.progress = Math.round(event.loaded / event.total * 100);

      console.log(`Uploaded! ${this.progress}%`);

      break;

    case HttpEventType.Response:

      console.log('User successfully created!', event.body);

      this.message='User successfully created!';

      saveAs(event, this.fileToUpload.name + '.xlsx')

      setTimeout(() => {

        this.progress = 0;

      }, 1500);



  }

})



file not saved and this console give me



Request has been made!

 Uploaded! 100%

Response header has been received!



core.js:4002 ERROR HttpErrorResponse

图像问题

我得到的错误是

HttpErrorResponse
error: {error: SyntaxError: Unexpected token P in JSON at position 0 at JSON.parse (<anonymous>) at XMLHtt…, text: "PK\u0003\u0004\u0014\u0000\b\b\b\u0000�u\u000eSH7b�X\u0001\u0000\u00000\u0006\u0000\u0000\u0013\u0000\u0000\u0000[Content_Types].xml�…\u0000\u0000\u0000�\u001a\u0000\u0000xl/sharedStrings.xmlPK\u0005\u0006\u0000\u0000\u0000\u0000\r\u0000\r\u0000R\u0003\u0000\u0000O\u001d\u0000\u0000\u0000\u0000"}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure during parsing for http://localhost:61265/api/DeliverySys/"
name: "HttpErrorResponse"
ok: false
status: 200
statusText: "OK"
url: "http://localhost:61265/api/DeliverySys/"
[[Prototype]]: HttpResponseBase

响应头

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Content-Disposition: attachment; filename=Orignal2-4108965c-60d8-4b12-a5a9-80a7fa038479.xlsx; filename*=UTF-8''Orignal2-4108965c-60d8-4b12-a5a9-80a7fa038479.xlsx
Content-Length: 8375
Content-Type: text/plain
Date: Sat, 14 Aug 2021 13:00:28 GMT
Server: Kestrel
Vary: Origin
4

1 回答 1

1

如果我的问题是正确的，您必须像这样创建您的请求：

  addUser(name: string, profileImage: File): Observable<any> {
    var formData: any = new FormData();
    formData.append("name", name);
    formData.append("avatar", profileImage);

        return this.http.post('http://localhost:61265/api/DeliverySys/',formData,{
          reportProgress: true,
          observe: 'events'//now when you will subscribe you will get the events, in his case he neded responseType: 'blob', because from the back end he was receiving the blob too.
        });
   }

然后像这样调用方法：

this.fileUploadService.addUser(
  this.form.value.name,
  this.form.value.avatar
).subscribe((event: HttpEvent<any>) => {
  switch (event.type) {
    case HttpEventType.Sent:
      console.log('Request has been made!');
      break;
    case HttpEventType.ResponseHeader:
      console.log('Response header has been received!');
      break;
    case HttpEventType.UploadProgress:
      this.progress = Math.round(event.loaded / event.total * 100);
      console.log(`Uploaded! ${this.progress}%`);
      break;
    case HttpEventType.Response:
      console.log('User successfully created!', event.body);
     //add whatever thing you have to do here. 
      setTimeout(() => {
        this.progress = 0;
      }, 1500);

  }
})

这里的来源

于 2021-08-14T11:13:44.173 回答