javascript - Formdata 返回空白对象

Question

我正在使用 Angular 5，这是 Angular 的新手，但我已经研究过很多 JavaScript 框架。我陷入了一个问题，下面是我现在面临的描述问题。

我已经创建了表单，我想在提交时发送到服务器，我尝试附加包含所有输入字段名称和值的 Formdata 对象，但在处理请求时我的脚本发送空对象。

这是我写的代码:

uploadBannerCreative(event) {

        const formData = new FormData();

         formData.append("data", "value");


        let headers = new Headers();
        headers.append('Content-Type', 'multipart/form-data');
        headers.append('Accept', 'application/json');
        this._uploadService.upload(formData,headers).subscribe(
           data => {
                if(data.success == true) {

                }
             },
            error => {

            }
        ); 

    }

这是向服务器发送数据的服务

@Injectable()导出类UploadCreativeService {

constructor(private http: Http) {

}

upload(data,headers) {

    return this.http.post('url', JSON.stringify(data),{headers:headers})
        .map((response: Response) => {
            return Response; 
        });
}

}

它的代码很简单，但不适合我。我是否遗漏了一些内容？

Answer 1

headers.append('Content-Type', 'multipart/form-data');

不要那样做。当您向 XMLHttpRequest 和 fetch 传递 FormData 对象时，它们将自动生成 Content-Type header 。手动提供一个将覆盖它。在这种情况下，缺少(必需的)boundary 参数。

<小时/>

JSON.stringify(data)

不要那样做。将 FormData 对象本身传递给 XMLHttpRequest 或 fetch。它不是 JSON.stringify 可以处理的对象。