当前请求不是多部分请求：Spring boot

Question

Current request is not a multipart request Spring boot error while trying to upload a Image file.

Spring Boot

@PostMapping(value = "/add-item")
public ResponseEntity<?> handleProductInsert ( @RequestParam MultipartFile thumbnailFile ){
  try{
          .....................
          .....................
        return new ResponseEntity("Product added successfully", HttpStatus.OK);
    }catch (Exception e){
        return new ResponseEntity("Internal Server Error. Try again later", 
          HttpStatus.INTERNAL_SERVER_ERROR);
    }
}

React App

state={data:null}

   handleChange=(e)=>{
     this.setState({data:e.target.files[0]});
   }

   connectToDatabase=async()=>{
        return await axios.post(`https://localhost:8080/add-item`, this.state.data);
    }

   render()=>{
       return (<>
                <input accept="image/*" onChange={this.handleChange} type="file" />
                <button onClick={this.connectToDatabase}>Submit</button>
               </>
              )
}

Answer 1

try to change @PostMapping when MULTIPART_FORM_DATA_VALUE from import static org.springframework.http.MediaType.MULTIPART_FORM_DATA_VALUE;

@PostMapping(value = "/add-item", consumes = MULTIPART_FORM_DATA_VALUE)
public ResponseEntity<?> handleProductInsert ( @RequestParam MultipartFile thumbnailFile ){
  try{
          .....................
          .....................
        return new ResponseEntity("Product added successfully", HttpStatus.OK);
    }catch (Exception e){
        return new ResponseEntity("Internal Server Error. Try again later", 
          HttpStatus.INTERNAL_SERVER_ERROR);
    }
}

Answer 2

form-data requires a key along with the file in Controller. Try:

@PostMapping(headers = { "Content-Type=multipart/form-data" }, value = "/add-item")
public ResponseEntity<?> handleProductInsert(@RequestParam("file") MultipartFile thumbnailFile){
  try{
          .....................
          .....................
        return new ResponseEntity("Product added successfully", HttpStatus.OK);
    }catch (Exception e){
        return new ResponseEntity("Internal Server Error. Try again later", 
          HttpStatus.INTERNAL_SERVER_ERROR);
    }
}

On Client Application, prepare request:

<form id='form' encType="multipart/form-data" method="post">
    <input id='import-field' type="file" name="file" accept=".jpg" onChange={onUpload} />
</form>

const onUpload = event => {
    if (event.target.files.length > 0) {
        let formElement = document.getElementById('import-field');
        uploadFile(new FormData(formElement)); //do POST call here
    }
};