Spring API请求给出“不支持内容类型'application/octet-stream'”错误,但使用Postman时请求成功

8fsztsew  于 2022-12-10  发布在  Spring
关注(0)|答案(2)|浏览(310)

我尝试通过React前端向Spring后端发送API请求。当我发送请求时,收到以下错误:

Could not resolve parameter [0] in private org.springframework.http.ResponseEntity com.example.bottlecap.controllers.BottlecapController.entryForm(com.example.bottlecap.domian.Bottlecap,org.springframework.web.multipart.MultipartFile): Content type 'application/octet-stream' not supported

然而,当我使用Postman设置请求时,它处理得很好。我想我在React端设置FormData的方式可能有问题。但是,我几乎没有运气弄清楚它。
我的API应该接收一个对象,该对象保存了我提交的数据以及与提交一起的图像。在我的Postman请求中,我创建了一个表单数据,该数据保存了一个JSON文件,该文件保存了所有对象数据和一个随机图像,只是用于测试。正如我所说的,请求可以很好地完成这一点。但是,在前端代码中,我将对象数据解析为Json,并将其添加到FormData,同时将图像添加到FormData。
下面是我的Spring控制器:

@RequestMapping(path ="/bottlecap/entry", method = RequestMethod.POST, consumes = {MediaType.MULTIPART_FORM_DATA_VALUE, MediaType.APPLICATION_OCTET_STREAM_VALUE})
    private ResponseEntity entryForm(@RequestPart("cap") Bottlecap cap, @RequestPart("file") MultipartFile image){
        System.out.println(cap);
        cap.toString();
        System.out.println("Test");
        return ResponseEntity.ok().build();

    }

下面是我的react Frontend表单提交处理程序:

handleSubmit = event =>{

        console.log(this.state.page);
        
        console.log(this.state.page);
        event.preventDefault();
        const cap ={
            "name":this.state.name,
            "brand":this.state.brand,
            "yearMade":parseInt(this.state.yearMade),
            "country": this.state.country,
            "description":this.state.description,
            "yearFound":parseInt(this.state.yearFound),
            "isAlcoholic":"true"
        };
        const stringCap = JSON.stringify({cap});
        console.log(cap);
        var formData = new FormData();
        formData.append('cap', JSON.parse(stringCap));
        formData.append('file',this.state.imageFile)
        
        
            axios.post('http://localhost:8080/bottlecap/entry', formData, {headers:{'Content-Type':'multipart/form-data'}})
            .then(res=>{
                console.log(res);
                console.log(res.data);
                //window.location = "/success"
                this.setState({pageDone:true})
                this.setState({pageLoading:true})
            })

    }

Here is a screenshot of my Postman request if it may help.
这里也是我通过 Postman 发送的json文件的内容,如果它可能也有帮助的话。

{"name":"post-test",
"brand":"post-test",
"yearMade":1000,
"country":"post-test",
"description":"post-test",
"yearFound":1000,
"isAlcoholic":"true"}

我做的最后一个更改是向axios API请求添加一个头,但仍然没有成功。

c9qzyr3d

c9qzyr3d1#

在postman中,对于名为cap的参数,要发送一个.json文件。

formData.append('cap', JSON.parse(stringCap));

JSON.parse将创建一个javascript对象,这不是您的后端所期望的。您需要将其作为JSON文件发送。
未测试,但这可能会给予你的想法。

const json = JSON.stringify(cap);
const blob = new Blob([json], {
  type: 'application/json'
});

var formData = new FormData();
formData.append('cap', blob);
formData.append('file', this.state.imageFile)

axios.post('http://localhost:8080/bottlecap/entry', formData, {headers:{'Content-Type':'multipart/form-data'}})
        .then(res=>{
    console.log(res.data);
}
rqqzpn5f

rqqzpn5f2#

这是我在Vue 3中的提取样本,它的工作感谢你。谢谢!

let formData = new FormData();
formData.append('productJsonData', new Blob([JSON.stringify(productJsonObject)], {type: 'application/json'}));
formData.append('file', image); // This image comes from an <v-file-input> TAG

  const response = await fetch(
    `http://.../addProduct`,
    {
      headers: { 'Accept': 'application/json' }, 
      method: 'POST',
      body: formData
    }
  );
  const responseData = await response.json();

  if (!response.ok) {
    console.log('REST error: [' + responseData.error + ']')
    throw error;
  }

相关问题