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

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

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时手动添加标头，则会得到没有边界的标头：

但是，如果我未指定标头，则本机提取会自动将此标头与边界一起添加，并且效果很好：

我在这里有什么选择？

Answer 1

问题中的代码有两个问题：

通过将Content-Type设置为multipart/form-data 您自己，FormData的序列化将不会在幕后设置正确的标头，且没有边界。 / li>
在post函数中，您拥有JSON.stringify(body)，它将FormData对象转换为JSON字符串。完成此操作后，您只需尝试发布一个字符串，而不是完整的FormData对象。

无法使用Angular的HttpClient上传图像

1 个答案: