我是angularJS的新手,并尝试使用angular JS和Spring MVC上传文件,但无法获得所需的解决方案,并最终在JS Controller中出现异常。
下面是代码,请看一下,请帮帮我。谢谢
ApplicationContext.xml
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize" value="10000000" /> <!-- setting maximum upload size --> </bean>
JSP:
<div data-ng-controller='QuestionController'> <form name="createChapForm" data-ng-submit="submitQue();" enctype="multipart/form-data" class="form-horizontal"> <div class="form-group"> <label class="control-label col-sm-3">Select Class * :</label> <div class="col-sm-8"> <div class="col-sm-6"> <select data-ng-model='class_id' data-ng-init='getClasses();' data-ng-change='getSubjectsClasswise(class_id);' class="form-control" required> <option value="">--SELECT--</option> <option data-ng-repeat='c in clss' value="{{ c.class_id}}">{{ c.class_name}}</option> </select> </div> </div> </div> <div class="form-group"> <label class="control-label col-sm-3">Select Subject * :</label> <div class="col-sm-8"> <div class="col-sm-6"> <select data-ng-model='question.sid' data-ng-change='doGetChapters(question.sid);' class="form-control" required> <option value="">--SELECT--</option> <option data-ng-repeat='s in subsss' value="{{ s.sid}}">{{ s.subject_name}}</option> </select> </div> </div> </div> <div class="form-group"> <label class="control-label col-sm-3">Select Chapter :</label> <div class="col-sm-8"> <div class="col-sm-6"> <select data-ng-model='question.chap_id' class="form-control" > <option value="">ALL</option> <option data-ng-repeat='c in chapters' value="{{ c.chap_id}}">{{ c.chap_name}}</option> </select> </div> </div> </div> <div class="form-group"> <div class="control-label col-sm-2" >Question :</div> <div class="col-sm-10 padding_0"> <textarea data-ng-model='question.question_text' rows="5" class="form-control " > </textarea> <div class="right"> <div class="fileUpload btn btn-primary1 btn-sm"> <input type="file" data-ng-model="file" name="file" id="file" id="q_id" class="upload" /> </div> </div> </div> </div> </form> </div>
AngularJS控制器:
$scope.submitQue = function() { console.log('file is ' ); console.dir(file.files[0]); var URL =appURL+'/adm/doAddQuestion.do'; var fd = new FormData(); fd.append('file', file.files[0]); fd.append('questionBean', angular.toJson($scope.question, true)); $http.post(URL, fd, { transformRequest : angular.identity, headers : { 'Content-Type' : undefined } }).success(function() { console.log('success'); }).error(function() { console.log('error'); }); }
Java控制器:
@RequestMapping(value = "/doAddQuestion.do", method = RequestMethod.POST, consumes = MediaType.MULTIPART_FORM_DATA_VALUE) public @ResponseBody String saveUserDataAndFile(@RequestParam(value = "file") MultipartFile file, @RequestBody QuestionBean questionBean) { System.out.println("output: "+questionBean.getQuestion_text()); // Im Still wotking on it return ""; }
例外情况:
Mar 08, 2017 7:46:46 PM org.springframework.web.servlet.mvc.support.DefaultHandlerExceptionResolver handleHttpMessageNotReadable WARNING: Failed to read HTTP message: org.springframework.http.converter.HttpMessageNotReadableException: Could not read document: Unexpected character ('-' (code 45)) in numeric value: expected digit (0-9) to follow minus sign, for valid numeric value at [Source: java.io.PushbackInputStream@bc03e1; line: 1, column: 3]; nested exception is com.fasterxml.jackson.core.JsonParseException: Unexpected character ('-' (code 45)) in numeric value: expected digit (0-9) to follow minus sign, for valid numeric value at [Source: java.io.PushbackInputStream@bc03e1; line: 1, column: 3] Mar 08, 2017 7:46:46 PM org.springframework.web.servlet.mvc.support.DefaultHandlerExceptionResolver logException WARNING: Handler execution resulted in exception: Could not read document: Unexpected character ('-' (code 45)) in numeric value: expected digit (0-9) to follow minus sign, for valid numeric value at [Source: java.io.PushbackInputStream@bc03e1; line: 1, column: 3]; nested exception is com.fasterxml.jackson.core.JsonParseException: Unexpected character ('-' (code 45)) in numeric value: expected digit (0-9) to follow minus sign, for valid numeric value at [Source: java.io.PushbackInputStream@bc03e1; line: 1, column: 3]
添加这些.js文件,其中已添加angular.js的文件angular-file-upload.js,angular-file-upload- shim.js,ng-file-upload.js,ng-file-upload-shim.js
.js
angular.js
angular-file-upload.js
angular-file-upload- shim.js
ng-file-upload.js
ng-file-upload-shim.js
您可以从此链接下载“ 上传角度文件”。
然后添加ngFileUpload,'angularFileUpload'在angular.module下面的行中。
ngFileUpload,'angularFileUpload'
angular.module
angular.module('formSubmit', [ 'ngFileUpload', 'angularFileUpload', 'ui.router' ]);
然后$upload像这样添加您的角度控制器。
$upload
app.controller('FormSubmitController', function($scope, $http, $upload)
在角度代码中使用$upload.upload代替$http.post。
$upload.upload
$http.post
$upload.upload({ url : 'doAddQuestion.do', file : yourFile, data : $scope.questionBean, method : 'POST' });
更换弹簧控制器。
@RequestMapping(value = "/doAddQuestion.do", method = RequestMethod.POST, headers = ("content-type=multipart/*")) public @ResponseBody String saveUserDataAndFile(@RequestParam("file") MultipartFile file, QuestionBean questionBean) { System.out.println("output: "+questionBean.getQuestion_text()); // Im Still wotking on it return ""; }