Angular 文件上传不适用于 formData

Question

I am trying to upload multiple file upload in Angular 7 here is the html code

<form [formGroup]="exceptionChangeStatusForm" (ngSubmit)="submitChangeStatusForm()" enctype="multipart/form-data">
        <div class="form-group">
            <label>Documents:</label>
            <input type="file" name="documents" multiple (change)="exceptionCommentFileChange($event)"/>
        </div>
        <div class="form-group" style="text-align:center;">
            <button type="submit" class="btn btn-primary">Save</button>
        </div>
    </form>

Here is the javascript code

exceptionCommentFileChange(event) {
    if (event.target.files.length > 0) {
        this.addExceptionCommentForm.get('documents').setValue(event.target.files);
    }
}

I created formData for sending files through api

submitChangeStatusForm() {

    const formData = new FormData();
    const documents = this.addExceptionCommentForm.get('documents').value;
    for ( let i = 0; i < documents.length; i++) {
        formData.append('documents', documents[i], documents[i]['name']);
    }
    this.http.post(environment.exceptionsApiUrl, formData).pipe();
}

Here is the header request

Accept: application/json
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
Authorization: Bearer eyJ0eXAiOiJKV
Connection: keep-alive
Content-Length: 179473
Content-Type: application/json; charset=utf-8
Host: localhost
Origin: http://localhost:4200
Referer: http://localhost:4200/v2/exceptions/validation
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36

And i am trying to change content-type to multipart/form-data it is not changing

return this.http.post(environment.exceptionsApiUrl + url, params, {headers : {
    'Content-Type': 'multipart/form-data',
    'Accept': 'application/json',
  }}).pipe();

And my request payload is looking something like this

------WebKitFormBoundaryqe260o3UOMqEKW2A
Content-Disposition: form-data; name="documents"; filename="1.jpeg"
Content-Type: image/jpeg

When i try from postman it works, but from angular it is not working, I am getting 400 response from api when i try from angular. Please, let me know if there are any changes to be made.

Answer 1

Hi I found the solution here. When I removed the Content-type it works on my end. Hope this one will help

https://github.com/angular/angular/issues/13241