无法使用 Angular 的 HttpClient 上传图片

Question

I am able to upload an image perfectly fine using the native fetch POST:

let formData = new FormData();
        formData.append('file', event.target.files[0]);
        console.log(event.target.files[0]);
        fetch('http://localhost:8080/file/upload', {
            method: 'POST',
            headers:{
                'Authorization': 'Bearer ' + JWT
            },
            body:formData
        }).then(response => console.log(response));

However, when I try this using Angular's HttpClient, the request fails since the 'Content-Type': 'multipart/form-data' is not added.

My Angular code:

The file where I'm calling the service:

this.fileSaverService.uploadImage(event.target.files[0]).subscribe(
            (data)=>{
                console.log(data);
            },
            (error) => {
                console.log(error);
            }
        );

The fileSaverService:

  uploadImage(fileToUpload) {
    const endpoint = 'http://localhost:8080/file/upload';
    const formData: FormData = new FormData();
    formData.append('file', fileToUpload);
    return this.api
      .post(endpoint, formData, { headers: {'Content-Type': 'multipart/form-data'} });
}

The this.api:

  post(endpoint: string, body: any, reqOpts: any = {}) {    
    reqOpts.headers = this.handleHeaders(reqOpts.headers);
    return this.http.post(endpoint, JSON.stringify(body), reqOpts);
  }

If I add the header manually when using HttpClient, I get this header without the boundary:

However the native fetch adds this header automatically with the boundary if I don't specify a header and this works perfectly:

What are my options here?

Answer 1

There are two problems with the code in your question:

1. By setting Content-Type to multipart/form-data yourself , the serialisation of your FormData will not result in the correct header with boundaries being set behind the scenes.
2. In your post function, you have JSON.stringify(body) , which is converting your FormData object into a JSON string. After doing this, you're simply attempting to POST a string rather than a complete FormData object.