Question

我需要上传一个文件并发送一些json，我有这个功能：

POST_formData(url, data) {
        var headers = new Headers(), authtoken = localStorage.getItem('authtoken');

        if (authtoken) {
            headers.append("Authorization", 'Token ' + authtoken)
        }

        headers.append("Accept", 'application/json');
        headers.delete("Content-Type");

        var requestoptions = new RequestOptions({
            method: RequestMethod.Post,
            url: this.apiURL + url,
            headers: headers,
            body: data
        })

        return this.http.request(new Request(requestoptions))

        .map((res: Response) => {
            if (res) {
                return { status: res.status, json: res.json() }
            }
        })
    }

我的问题是，如果我将content-type设置为“multipart/form-data”我的服务器抱怨边界，如果我完全删除content-type标头，我的服务器会抱怨它“{ {1}}“支持的媒体类型。

那么，如何使用angular2发送FormData？

Answer 1

模板：

AUTOTHROTTLE_ENABLED = True
AUTOTHROTTLE_START_DELAY = 1
AUTOTHROTTLE_MAX_DELAY = 3

UPD：Angular 5 - HttpClient + Typescript

<label class="btn btn-primary">
  <input type="file" style="display: none;" multiple="true" (change)="fileChange($event)" accept=".xml">
  <span>Click Me!</span>
</label>

旧的Http lib - 在Angular 4.3之前：

onFileUpload(event: EventTarget) {

  const eventObj: MSInputMethodContext = <MSInputMethodContext>event;
  const target: HTMLInputElement = <HTMLInputElement>eventObj.target;
  const files: FileList = target.files;

  const formData: FormData = new FormData();

  for (let i = 0; i < files.length; i++) {
    formData.append('file', files[i]);
  }

  // POST
  this.httpClient.post<AnalyzedData>(uploadUrl, formData).subscribe(...);
}

Answer 2

它是Angular2 Git Repository的Open Isuue，还有一个等待合并的Pull Request，希望它很快就会合并。

<强>可替换地，

您可以直接使用XMLHttpRequest对象。

不要忘记设置标题

meteor/angular

在xhr.setRequestHeader("enctype", "multipart/form-data"); // IE workaround for Cache issues xhr.setRequestHeader("Cache-Control", "no-cache"); xhr.setRequestHeader("Cache-Control", "no-store"); xhr.setRequestHeader("Pragma", "no-cache");上。

类似问题：

How to upload file in Angular2

Angular 2 File upload from input type=file

Angular2 post uploaded file

Answer 3

我知道这已被标记为已回答并且已经很老了，但我将FormData对象发布到OpenIdConnect AuthServer时遇到问题，上面的文件上传示例并不是我想要的。

这是我获得OpenIdAuthToken的服务：

{{1}}

Answer 4

我解决了这个问题，根本不需要content-type。

请参见此处https://stackoverflow.com/a/45879409/2803344

另请参阅此处以查看如何设置headers，Angular2 - set headers for every request

2017年8月25日

如何在Angular 2中发布FormData对象？

4 个答案: