Question

我正在从角度发送自定义对象和formData到Spring引导，但是引发了错误-“当前请求不是多部分请求”。

当我这样做时，一切正常

角度

private base_url = "http://localhost:8082";


  addProduct(product:Product,file:File) :Observable<any>
  {
      const headers = new HttpHeaders({
      Authorization: 'Bearer ' + sessionStorage.getItem("authToken")})

      let formData = new FormData();
      formData.append("file",file);

    return this.httpClient.post<any>(this.base_url+"/api/addProduct",formData,{headers});
 or 
return this.httpClient.post<any>(this.base_url+"/api/addProduct",product,{headers});

弹簧（对应于上面）

    @PostMapping("/addProduct")
    public void addProduct(@RequestParam("file") MultipartFile file) throws IOException
    {

    }
or
@PostMapping("/addProduct")
    public void addProduct(@RequestBody Product product)
    {

    }

我当前的实现是下面的代码，但是它不起作用。我收到一个错误-当前请求不是多部分请求。我如何将Product和formData都发送到spring boot app。我需要帮助。角形

private base_url = "http://localhost:8082";


     //add product
      addProduct(product:Product,file:File) :Observable<any>
      {
          const headers = new HttpHeaders({
          Authorization: 'Bearer ' + sessionStorage.getItem("authToken")})

          let formData = new FormData();
          formData.append("file",file);

        return this.httpClient.post<any>(this.base_url+"/api/addProduct",{product,formData},{headers});

      }

春天

 //add product
@PostMapping("/addProduct")
public void addProduct(@RequestBody Product product,@RequestParam("file") MultipartFile file) throws IOException
{
}

Answer 1

您可以在多部分文件和数据的表单数据中使用角度代码

const formData = new FormData();

formData.append('file',this.pdfFile,this.pdfFile.name);//append for file

formData.append('key',Value);//append for data
formData.append('key',Value);

例如formData.append（'productName'，'product.productName）;

const headers = new HttpHeaders({
      Authorization: 'Bearer ' + sessionStorage.getItem("authToken")})

this.httpClient.post<any>(this.base_url+"/api/addProduct', formData ,headers).subscribe(
  (response) => {
console.log(response); }

春天

@PostMapping("/addProduct")
public void addProduct(@RequestBody Product product)
{

}

您可以尝试此代码

Answer 2

您的标题应包含"Content-Type": "multipart/form-data"

请将其添加到标题中

const HttpUploadOptions = {
  headers: new HttpHeaders({ "Content-Type": "multipart/form-data" })
}

Answer 3

尝试使用xmlHttpRequest而不是httpClient

const formData = new FormData();
//file is your uploaded file
formData.append("file", file) 

const xhr = new XMLHttpRequest()

xhr.onreadystatechange = (e) => {

  if (xhr.status === 200) {
    console.log('SUCCESS', xhr.responseText);
  } else {
    console.warn('request_error');
  }
};

xhr.open('POST', 'UPLOAD_URL', true);
xhr.send(formData);

确保您的微服务接受键为“ file”的multipartfile

当前请求不是一个多部分请求-当我发送表单数据和一个有角度的对象以启动弹簧时

3 个答案: