Angular如何以编程方式发送表单数据答案

【问题标题】：Angular how to progamatically send a Form DataAngular如何以编程方式发送表单数据
【发布时间】：2019-09-19 16:11:31
【问题描述】：

似乎没有关于发送带有表单数据的 api 请求的好的在线文档。

只要你用谷歌搜索它，谷歌就会自动假设你想创建一个客户端反应表单 gui，实际的 API 部分是该死的。

即使您按照他们的指南进行到底，您也不会在浏览器控制台中获得表单数据部分。

这就是我想要的：

但是我的电话看起来像这样：

这是我当前的代码 (component.ts)：

  public picture: FormData;

  addedImage(event) {
    this.picture = event.addedFiles[0];
    console.log(this.picture);
    this.api.uploadFile(this.picture).subscribe();
  }

...和 api 部分 (apis.ts) :

 public uploadFile(file){
    const url = AppGlobal.API_URL + 'provisioning/api/files';
    let httpParams = new HttpHeaders();
    httpParams = httpParams.set('Content-Type', 'multipart/form-data');
    console.log(httpParams);
    return this.http.post<any>(url, file, {headers: httpParams}).pipe(
      map((data: any) => {
        console.log('return ', data);
          if(data) this.s.latestFileId$.next(data);
        }
      ));
  }

这是上面component.ts中console.log输出的内容：

File {name: "image.jpg", lastModified: 1568824078958, lastModifiedDate: Wed Sep 18 2019 18:27:58 GMT+0200 (Central European Summer Time), webkitRelativePath: "", size: 69192, …}
lastModified: 1568824078958
lastModifiedDate: Wed Sep 18 2019 18:27:58 GMT+0200 (Central European Summer Time) {}
name: "image.jpg"
size: 69192
type: "image/jpeg"
webkitRelativePath: ""
__proto__: File
api.calls.ts:41

...通过 apis.ts 中的 console.log

HttpHeaders {normalizedNames: Map(0), lazyUpdate: Array(1), headers: Map(0), lazyInit: HttpHeaders}
headers: Map(0)
size: (...)
__proto__: Map
[[Entries]]: Array(0)
length: 0
lazyInit: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}
lazyUpdate: [{…}]
normalizedNames: Map(0) {}
__proto__: Object

我做错了什么？

这是我尝试过的另一种错误语法 (component.ts)：

  addedImage(event) {
    var oOutput = document.querySelector("div"), oData = new FormData();
    oData.append("myfile", event.addedFiles[0], "filename.txt");
    this.picture = event.addedFiles[0];
    console.log(this.picture);
    this.api.uploadFile(oOutput);
  }

(apis.ts)：

  public uploadFile(file){
    const url = AppGlobal.API_URL + 'provisioning/api/files';
    const oReq = new XMLHttpRequest();
    oReq.open('POST', url, true);
    oReq.onload = function(oEvent) {
      if (oReq.status == 200) {
        console.log('upload success');
      } else {
        console.log('upload fail');
      }
    };

    oReq.send(file);
  }

【问题讨论】：

标签： angular api multipartform-data form-data

【解决方案1】：

使用FormData API

const formData: FormData = new FormData();
formData.append('files[]', event.addedFiles[0]);
let httpParams = new HttpHeaders();
httpParams = httpParams.set('Accept', '*/*');
this.http.post('some/url', formData, {headers: httpParams})

您也可以参考this guide。不过，这不是 Angular 特有的。

【讨论】：

我编辑了您的答案以包括对我有用的内容，但除此之外，非常感谢您成功了！ :D

【解决方案2】：

试试这个：

constructor(private http: Http) {}
private baseUrl = "api/sth";

private sendData():observable<any>{
    const formData: FormData = new FormData();
    formData.append(key, value);

    const headers = new Headers();
    headers.append("Accept", "application/json");
    const options = new RequestOptions({ headers: headers });

    return this.http
        .post(`${this.baseUrl}/url`, formData, options)
        .catch(this.handleError);
}


private handleError(error: Response): Observable <any> {
    console.error("observable error: ", error);
    return Observable.throw(error.statusText);
}

If you would like to send an image to the server by formData visit this

【讨论】：