代码之家 › 专栏 › 技术社区 › slevin

无法在服务中正确设置POST的RequestOptions参数

angular6 angular

7

slevin · 技术社区 · 6 年前

我想观察表格提交的进度,这样我就可以得到上传文件的百分比。

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;        
          }
        }        
    });

这个很好用。

我试着把它分成两部分。将post及其头和参数转换为我的服务中的函数,然后订阅并在组件中获得结果。我试着这样做:

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呢?

谢谢

5 回复 | 直到 6 年前

1

Sudarshana Dayananda 6 年前

我觉得你在混合原料药, reportProgress 是的财产 HttpRequest<T> 住在哪里 @angular/common/http

在您的示例中,似乎您的服务是基于角度6 Http HttpModule 在里面 @angular/http

相反,使用 request HttpClient @角度/公共/http .
HttpHeaders 从 @角度/公共/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) { ... }

我希望这能解释并解决你的问题!

2

1

jg80 6 年前

您对http.post的第三个参数是httpOptions,您的参数如下

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

https://angular.io/guide/http

这是一个他们使用的例子:

{ observe: 'response' }

3

1

Amr Ibrahim 6 年前

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

http.post(...

要在启用进度事件的情况下发出请求,可以创建 HttpRequest请求 与 报告进度 选项设置为true以启用进度事件跟踪。

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

4

1

Sudarshana Dayananda 6 年前

对你来说 ,

reportProgress 属性与 HttpRequest<T> 上课地点 @angular/common/http 请参阅文档 here .
headers 属性与 Headers 上课地点 @angular/http 哪个是 已弃用 现在。请参阅文档 here
你的问题是 标题 不相容的 .

解决方案 ,

标题 属性应与上课地点 @角度/公共/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 });
  }

}

5

1

JBoothUA 6 年前

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

let headers = new HttpHeaders();

还要确保您正在使用:

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