javascript - 无法使用 Angular 的 HttpClient 上传图片

Question

我可以使用原生获取 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));

但是，当我使用 Angular 的 HttpClient 尝试此操作时，请求失败，因为未添加 'Content-Type': 'multipart/form-data'。

我的 Angular 代码:

我调用服务的文件:

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

文件保存服务:

  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'} });
}

this.api:

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

如果我在使用 HttpClient 时手动添加 header ，我会得到这个没有边界的 header :

但是，如果我没有指定 header ，则 native 提取会自动将此 header 添加到边界，并且效果很好:

我有哪些选择？

Answer 1

你问题中的代码有两个问题:

1. 通过将 Content-Type 设置为 multipart/form-data yourself，FormData 的序列化将不会导致在幕后设置边界的正确 header 。
2. 在您的 post 函数中，您有 JSON.stringify(body)，它将您的 FormData 对象转换为 JSON 字符串。执行此操作后，您只是在尝试 POST 字符串而不是完整的 FormData 对象。