- 首页
- 前端开发
- 使用 AngularJS 和 SpringMVC 的多部分文件上传
使用 AngularJS 和 SpringMVC 的多部分文件上传
[英] Multipart File Upload using AngularJS and SpringMVC
本文介绍了使用 AngularJS 和 SpringMVC 的多部分文件上传的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 angularJS 的新手，并尝试使用 angular JS 和 Spring MVC 上传文件，但无法获得所需的解决方案并最终在 JS 控制器中出现异常.
下面是代码，看看，请帮帮我.谢谢
ApplicationContext.xml
<property name="maxUploadSize" value="10000000"/><!-- 设置最大上传大小--></bean>
JSP:
<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">选择类*:</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></选择>
<div class="form-group"><label class="control-label col-sm-3">选择主题*:</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></选择>
<div class="form-group"><label class="control-label col-sm-3">选择章节:</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></选择>
<div class="form-group"><div class="control-label col-sm-2" >问题:</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"/>
</表单>
AngularJS 控制器:
$scope.submitQue = function() {console.log('文件是');控制台.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, {变换请求:angular.identity，标题:{内容类型":未定义}}).成功(功能(){console.log('成功');}).错误(函数(){console.log('错误');});}
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("输出:"+questionBean.getQuestion_text());//我还在考虑返回 "";}
例外:
Mar 08, 2017 7:46:46 PM org.springframework.web.servlet.mvc.support.DefaultHandlerExceptionResolver handleHttpMessageNotReadable警告:无法读取 HTTP 消息:org.springframework.http.converter.HttpMessageNotReadableException:无法读取文档:数值中的意外字符('-'(代码 45)):预期数字 (0-9) 跟随减号，对于有效的数值在 [来源:java.io.PushbackInputStream@bc03e1;行:1，列:3]；嵌套异常是 com.fasterxml.jackson.core.JsonParseException:数值中的意外字符('-'(代码 45)):预期数字 (0-9) 跟随减号，对于有效数值在 [来源:java.io.PushbackInputStream@bc03e1;行:1，列:3]2017 年 3 月 8 日下午 7:46:46 org.springframework.web.servlet.mvc.support.DefaultHandlerExceptionResolver logException警告:处理程序执行导致异常:无法读取文档:数值中出现意外字符('-'(代码 45)):预期数字 (0-9) 跟随减号，对于有效数值在 [来源:java.io.PushbackInputStream@bc03e1;行:1，列:3]；嵌套异常是 com.fasterxml.jackson.core.JsonParseException:数值中的意外字符('-'(代码 45)):预期数字 (0-9) 跟随减号，对于有效数值在 [来源:java.io.PushbackInputStream@bc03e1;行:1，列:3]
解决方案
Add these .js file where you have added angular.js files angular-file-upload.js,angular-file-upload-shim.js,ng-file-upload.js,ng-file-upload-shim.js
您可以从此链接下载Angular File For Upload.
然后在 angular.module 中添加 ngFileUpload,'angularFileUpload' 见下行.
angular.module('formSubmit', [ 'ngFileUpload','angularFileUpload', 'ui.router' ]);
然后像这样在你的角度控制器中添加 $upload.
app.controller('FormSubmitController', function($scope, $http, $upload)
在您的 Angular 代码中使用 $upload.upload 而不是 $http.post.
$upload.upload({url : 'doAddQuestion.do',文件:你的文件，数据:$scope.questionBean，方法:'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("输出:"+questionBean.getQuestion_text());//我还在考虑返回 "";}
I am new to angularJS and trying to upload a file using angular JS and Spring MVC, but not able to get the required solution and ending up with exceptions in JS Controller.
Below is the code, Have a look and please help me out. Thank you
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 Controller:
$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 Controller:
@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 "";
}
Exceptions:
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]
解决方案
Add these .js file where you have added angular.js files angular-file-upload.js,angular-file-upload-shim.js,ng-file-upload.js,ng-file-upload-shim.js
You can download from this link Angular File For Upload.
Then Add ngFileUpload,'angularFileUpload' in angular.module see below line.
angular.module('formSubmit', [ 'ngFileUpload',
'angularFileUpload', 'ui.router' ]);
Then Add $upload in your angular controller like this.
app.controller('FormSubmitController', function($scope, $http, $upload)
Use $upload.upload instead of $http.post in your angular code.
$upload.upload({
url : 'doAddQuestion.do',
file : yourFile,
data : $scope.questionBean,
method : 'POST'
});
Change your spring controller.
@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 "";
}
这篇关于使用 AngularJS 和 SpringMVC 的多部分文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
