無法使用發布請求發送表單數據

Question

我正在嘗試使用Angular 4中的POST請求通過文件發送表單數據。如果標頭是'Content-Type': 'application/json'則表單數據不會發送到服務器。 如果標題是'Content-Type': 'multipart/form-data' ，則客戶端可以將表單數據發送到服務器。 但是在郵遞員中，application / json可以工作。 我想要在Angular 4中也一樣。

Component.ts：

        let formData: FormData = new FormData();
        formData.append("courseId", this.course_id.toString());
        formData.append("courseName", this.course_name.toString());
        formData.append('pic', this.file);
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers,withCredentials: true  });
        this.http.post('http://localhost:3000/createNew', formData, options)
            .map(res => res.json())
            .catch(error => Observable.throw(error))
            .subscribe(
                data => console.log('success'),
                error => console.log(error)
            )`

HTML：

<input type="file" name="pic" (change)="onFileChange($event)">
<input type="button" value="Upload" (click)="onUpload()">

Answer 1

要以角度或任何位置提交formdata ，的內容類型不應為Json 。 所以你可以這樣：

 let formData: FormData = new FormData();
    formData.append("courseId", this.course_id.toString());
    formData.append("courseName", this.course_name.toString());
    formData.append('pic', this.file);
    let headers = new Headers({ 'Content-Type': 'multipart/form-data' });
    let options = new RequestOptions({ headers: headers,withCredentials: true  });
    this.http.post('http://localhost:3000/createNew', formData, options)
        .map(res => res.json())
        .catch(error => Observable.throw(error))
        .subscribe(
            data => console.log('success'),
            error => console.log(error)
        )`

Answer 2

'Content-Type': 'multipart/form-data'標頭告訴瀏覽器不應對請求的內容進行編碼。 例如，當表單需要二進制數據（例如文件的內容）時，您將需要此文件。

郵遞員可能會忽略/刪除application/json之一。