Question

我使用角度6，并且一直沿this video tutorial提交图片。

我想观察表单提交的进度，因此我可以获得上载文件的百分比。

我的组件中有这个

import { HttpClient,HttpEventType } from '@angular/common/http';
import { Http, Headers } from '@angular/http';

  constructor(
    private formBuilder: FormBuilder, 
    private myService:MyService,
    private changeDetector: ChangeDetectorRef,
    private carouselConfig : NgbCarouselConfig    ,
    private http:HttpClient
   ) { }

    let headers = new Headers();    
    headers.append('Authorization',this.token);    
    let eb =null;
    this.http.post('http://localhost:3000/cms/upload',formData,{reportProgress:true,observe:'events'}).subscribe(
      event=>{        
        if(event.type === HttpEventType.UploadProgress){
          let pv = Math.round(event.loaded / event.total *100);
          this.imguploadprogress.nativeElement.value =  pv;          
        }
        else if(event.type === HttpEventType.Response){     
          eb = event.body;              
          if(eb.success){                  
            this.imguploadprogress.nativeElement.value =  100;                                   
            this.imageMsg='All good';                                       
          }
          else{
            this.imguploadprogress.nativeElement.value =  0;
            this.imageMsg='nope;        
          }
        }        
    });

这很好。

我现在尝试将其分为两部分。将帖子及其标题和参数转到我服务中的一个函数，然后只需订阅并在组件中获取结果即可。我尝试这样做：

myapp.component.ts

this.myService.uploadImage(form).subscribe(
  e=>{
    console.log('e- ',e);
  }
);

并为我服务 myapp.service.ts

  uploadImage(data) {
    let formData = new FormData(data);
    let headers = new Headers();    
    headers.append('Authorization',this.token);
    return this.http.post('http://localhost:3000/cms/upload',formData,{reportProgress:true, observe:'events', headers:headers});
  }

VScode说Argument of type {reportProgress:boolean;observe:string;headers:Headers} is not assingable to parameter of type RequestOptionsArgs

在编译期间，我得到Object literal may only specify known properties, and 'reportProgress' does not exist in type 'RequestOptionsArgs'.，当我尝试使用该表单时，我仅得到了最终的响应对象，而中间没有事件信息。

那么，如何正确设置RequestOptionsArgs？

谢谢

Answer 1

我认为您正在混合使用API，reportProgress是HttpRequest<T>的一个属性，位于@angular/common/http中。

在您的示例中，您似乎将服务基于Http中的HttpModule的Angular 6 @angular/http可注入服务中。

相反，请使用request中附带的HttpClient中的@angular/common/http方法。
此外，请确保还使用HttpHeaders中的@angular/common/http。

以下将起作用：

uploadImage(data) {
  let formData = new FormData(data);
  let headers = new HttpHeaders().append('Authorization', this.token);
  return this.httpClient.post(
    'http://localhost:3000/cms/upload',
    formData,
    {
      reportProgress: true,
      observe: 'events',
      headers: headers
    });
}

当然，您必须导入：

import { HttpClient, HttpHeaders } from '@angular/common/http';

并在您的服务构造函数中注入HttpClient：

constructor(private httpClient: HttpClient) { ... }

我希望这能解释并解决您的问题！

Answer 2

您对http.post的第三个参数是httpOptions，您的样子是

{reportProgress:true, observe:'events', headers:headers}

根据好消息 https://angular.io/guide/http

显示了他们使用的示例：

{ observe: 'response' }

Answer 3

使用http.request('post',...

代替http.post(...

要在启用进度事件的情况下发出请求，可以将 reportProgress 选项设置为true来创建 HttpRequest 实例，以启用进度事件跟踪。

uploadImage(data) {
  let formData = new FormData(data);
  let headers = new HttpHeaders();
  headers.append('Authorization', "mytoken");


  return this.http.request('post', 'http://localhost:3000/cms/upload', {
    body: formData,
    reportProgress: true,
    observe: 'events',
    headers: headers,
    responseType: 'json'
  });
}

遵循文档https://angular.io/guide/http#listening-to-progress-events

Answer 4

以您的情况，

reportProgress属性与HttpRequest<T>中的@angular/common/http类相关。请参阅文档here。
headers属性与Headers中的@angular/http类相关，该类现已已弃用。请参阅文档here。
出现问题的原因是属性headers的类型不兼容。

解决方案，

headers属性应与HttpRequest<T>中的@angular/common/http类关联，而不是Headers中的@angular/http类关联。

如下更改您的myapp.service.ts类，

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from "@angular/common/http";

@Injectable()
export class MyAppService {

  constructor(private http: HttpClient) {}

    uploadImage(data) {

    let formData = new FormData(data);
    let headers = new HttpHeaders()
                    .append('Authorization', this.token);
    return this.http.post('http://localhost:3000/cms/upload', formData,
              { reportProgress : true, 
                observe : 'events', 
                headers : headers });
  }

}

Answer 5

根据最新的签名，我认为您必须确保标头是HttpHeaders

let headers = new HttpHeaders();

还要确保您正在使用：

import { HttpClient, HttpHeaders } from '@angular/common/http';

无法在服务中正确设置POST的RequestOptionsArgs

5 个答案: