spring RESTcontroller 接受 dataURI

Posted 2023-03-15

【中文标题】spring RESTcontroller 接受 dataURI

【英文标题】：spring RESTcontroller to accept dataURI

【发布时间】：2015-07-03 02:17:25

【问题描述】：

我在使用 angularjs ng-img-crop 和 Spring-boot REST Web 服务时遇到问题。我想将图像文件从 ng crop 上传到我的后端 Web 服务。

我尝试编写一个弹簧控制器，但它失败了，我找不到一个好的教程。帮我解决这个基本请求。

谢谢！！！

app.js

angular.module('myApp', [
                         'ngRoute',
                         'myApp.view1',
                         'myApp.view2',
                         'myApp.version',
                         'ngImgCrop'
                         ])
                         .controller('Ctrl',['$scope','notify', function($scope,notify) 
                             $scope.myImage='';
                             $scope.myCroppedImage='';

                             var handleFileSelect=function(evt) 
                                 var file=evt.currentTarget.files[0];
                                 var reader = new FileReader();
                                 reader.onload = function (evt) 
                                     $scope.$apply(function($scope)
                                         $scope.myImage=evt.target.result;
                                     );
                                 ;
                                 reader.readAsDataURL(file);
                             ;
                             angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
                             $scope.submit=function() 
                                 notify($scope.myCroppedImage);
                             ;
                         ]).
                         factory('notify',['$http', function($http)  
                               return function(myCroppedImage) 
                                   var name = 'vishnu';
                                   $http.post('http://localhost:8080/imageUpload', myCroppedImage)
                                   .success(function(data, status, headers, config) 
                                     alert("success");
                                   )
                                   .error(function(data, status, headers, config) 
                                       alert("fail");
                                   );
                               
                         ])

controller.java

@RequestMapping(value="/imageUpload",method=RequestMethod.POST)
@ResponseBody
public String imageUpload(@RequestBody MultipartFile data)

    return "success";

当我使用以下请求运行时，我在 Web 服务中遇到了一些异常。

远程地址：127.0.0.1:8080 请求网址：http://localhost:8080/imageUpload 请求方法：POST 状态码：500 内部服务器错误 请求标头view source 接受：application/json, text/plain, / 接受编码：gzip，放气 接受语言：en-US,en;q=0.8 连接：保持活动 内容长度：1850 内容类型：应用程序/json；charset=UTF-8 主机：本地主机：8080 来源：文件：// 用户代理：Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/40.0.2214.115 Safari/537.36**

请求负载 数据：image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAFIklEQVR4Xu3VsRHAMAzEsHj/pTOBXbB9pFchyLycz0eAwFXgsCF.......

响应标头 连接：关闭 内容类型：应用程序/json；charset=UTF-8 日期：格林威治标准时间 2015 年 4 月 24 日星期五 12:40:35 服务器：Apache-Coyote/1.1 传输编码：分块

java 中的异常 org.springframework.web.multipart.MultipartException: 当前请求不是多部分请求

【参考方案1】：

首先你的控制器应该是这样的：

public ResponseEntity<Response> fileUpload(@RequestParam("file") MultipartFile file) 

使用@RequestParam 而不是@RequestBody，并在与您在注释中使用的名称相同的参数中发送文件。

此外，您的请求应使用multipart/form-data 类型发送。例如，一个常见的 html 为：

<form method="POST" enctype="multipart/form-data" action="your url">

【讨论】：

感谢您的意见。我在前端确实有 angular，我正在使用 ng-img-crop，请建议我如何在 javascript 中使用 angular 调用。