我无法使用multipartFile在Spring Boot 中发送数据?

44u64gxh  于 2023-11-17  发布在  Spring
关注(0)|答案(1)|浏览(210)

我无法使用react with axios将数据发送到spring Boot 应用程序。我需要发送数据包,以便在其中包含JSON和要发送到后端的图像。我已经在后端创建了方法,错误告诉它不接受不支持的Content-Type 'application/octet-stream',但是在inspect元素中,它将其作为“multipart/form-data”发送。我尝试使用Postman,它成功地将数据发送到数据库,但是当我使用前端时,我无法做到这一点。下面是我在后端的方法:

  1. @PostMapping("/meals")
  2. public ResponseEntity<String> createMeal( MultipartFile [] file, @RequestPart("meal") Meal meal, @RequestPart(value = "image", required = false) MultipartFile imageFile) {
  3. Meal savedMeal = authService.saveMeal(meal, imageFile);
  4. if (savedMeal != null) {
  5. return ResponseEntity.ok("Meal created successfully.");
  6. } else {
  7. return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error creating the meal.");
  8. }
  9. }
  10. const [mealData, setMealData] = React.useState({
  11. name: '',
  12. calories: 0,
  13. protein:0,
  14. fat:0,
  15. description: '',
  16. image: null, // State to hold the selected image file
  17. });
  18. function handleImage(e){
  19. const image = e.target.files[0];
  20. setMealData({...mealData,image});
  21. }
  22. function handleChange(e) {
  23. const { name, value } = e.target;
  24. setMealData({ ...mealData, [name]: value });
  25. }
  26. const handleSubmit = async (event) => {
  27. event.preventDefault();
  28. try {
  29. const meal = {
  30. name: mealData.name,
  31. description: mealData.description,
  32. protein: mealData.protein,
  33. fat: mealData.fat,
  34. calories: mealData.calories,
  35. };
  36. const formData = new FormData();
  37. formData.append("meal", JSON.stringify(meal));
  38. formData.append("image", mealData.image);
  39. console.log(JSON.stringify(meal));
  40. console.log(mealData.image);
  41. const res = await axios.post("http://localhost:8080/auth/meals", formData, {
  42. headers: {
  43. "Content-Type": "multipart/form-data", // Set the content type to multipart/form-data
  44. },
  45. });
  46. } catch (e) {
  47. console.log(e);
  48. }
  49. };

字符串
`

2izufjch

2izufjch1#

我已经用这种方式实现了很多次,我看不出有什么不同。
因此,如果没有完整的错误和代码,很难理解这个问题。但是你可以使用一些方法来尝试理解这个问题。
1.删除第一个参数(MultipartFile [] file
1.验证是否导入了正确的库(org.springframework.web.multipart.MultipartFile
1.尝试通过仅发送一个参数(文件)来隔离问题
1.请尝试以application.yaml为单位设置最大文件大小或发送小图像
1.禁用任何过滤器或拦截器

  1. @PostMapping("/meals")
  2. public ResponseEntity<String> createMeal(@RequestPart(value = "image", required = false) MultipartFile imageFile) {
  3. InputStream stream = imageFile.getInputStream(); // For debug
  4. Meal savedMeal = authService.saveMeal(null, imageFile);
  5. if (savedMeal != null) {
  6. return ResponseEntity.ok("Meal created successfully.");
  7. } else {
  8. return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error creating the meal.");
  9. }
  10. }

字符串
而在相同的UI中,只使用基本的:

  1. const handleSubmit = async (event) => {
  2. event.preventDefault();
  3. try {
  4. const meal = {
  5. name: mealData.name,
  6. description: mealData.description,
  7. protein: mealData.protein,
  8. fat: mealData.fat,
  9. calories: mealData.calories,
  10. };
  11. const formData = new FormData();
  12. //formData.append("meal", JSON.stringify(meal));
  13. formData.append("image", mealData.image);
  14. console.log(JSON.stringify(meal));
  15. console.log(mealData.image);
  16. const res = await axios.post("http://localhost:8080/auth/meals", formData, {
  17. headers: {
  18. //"Content-Type": "multipart/form-data", // Set the content type to multipart/form-data
  19. },
  20. });
  21. } catch (e) {
  22. console.log(e);
  23. }
  24. };


好运

展开查看全部

相关问题