Question

我遇到了使用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内部服务器错误请求Headersview源接受：application / json，text / plain， / Accept-Encoding：gzip，deflate 接受语言：EN-US，EN; Q = 0.8 连接：保持活跃内容长度：1850 内容类型：应用/ JSON;字符集= UTF-8 主持人：本地主机：8080 产地：文件：// 用户代理：Mozilla / 5.0（Windows NT 6.1; WOW64）AppleWebKit / 537.36（KHTML，如Gecko）Chrome / 40.0.2214.115 Safari / 537.36 **

请求有效负载 数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAFIklEQVR4Xu3VsRHAMAzEsHj / pTOBXbB9pFchyLycz0eAwFXgsCF .......

回复标题 连接：关闭内容类型：应用/ JSON;字符集= UTF-8 日期：2015年4月24日星期五12:40:35 GMT 服务器：Apache-狼/ 1.1 传输编码：分块

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

Answer 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">

spring RESTcontroller接受dataURI

1 个答案: