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

Question

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

一旦你 google 它 google 自动假设你想创建一个客户端反应形式 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);
  }

Answer 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 具体的。

Answer 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

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

Angular how to progamatically send a Form Data

api

multipartform-data

form-data

angular