使用 AngularJS 和 SpringMVC 进行多部分文件上传

Posted

技术标签:

【中文标题】使用 AngularJS 和 SpringMVC 进行多部分文件上传【英文标题】:Multipart File Upload using AngularJS and SpringMVC 【发布时间】:2017-07-29 00:45:09 【问题描述】:

我是 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]

【问题讨论】:

你的错误很明显 Expected MultipartHttpServletRequest: is a MultipartResolver configured? @see Multipart Resolver @EddieB 已更改,但仍然给出相同的异常 '改变'?你需要configure a multipart resolver...@更多信息Configure Multipart Resolver @EddieB 更新了改动,请看一下 您的原始问题。 multipart resolver 已解决。您需要遵循 SO 规则并为 new problem 发布新问题 【参考方案1】:

在你添加angular.js文件的地方添加这些.js文件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',
    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 "";

【讨论】:

这是什么yourFile 在你的情况下,你必须用这个代码替换file.files[0] 在控制台显示错误Error: [$injector:unpr] Unknown provider: $uploadProvider &lt;- $upload 我已经编辑了我的答案,请按照所有步骤操作。 我使用了确切的文件和建议的控制器参数列表。我收到了400 (Bad Request) 有什么建议吗?【参考方案2】:

使用以下代码更新您的请求映射:

 @RequestMapping(value = "/upload-file", method = RequestMethod.POST, consumes = MediaType.MULTIPART_FORM_DATA_VALUE)

它将删除您的多部分异常。

【讨论】:

已更改但仍给出相同的异常 我认为您的多部分异常现在已解决,当前问题可能在您的请求对象中。 no.. 现在它给出了一些不同的例外.. 我更新了问题,看看 “QuestionBean”是你的实体类吗?如果是,则实现 Serializable,如以下链接所示:***.com/questions/34888326/…。让我知道它是否适合你 @hrdkisback - 我正在尝试与您在回答中提到的完全相同的功能..即使我面临错误。它在控制台中显示错误 Error: [$injector:unpr] Unknown provider: $uploadProvider

以上是关于使用 AngularJS 和 SpringMVC 进行多部分文件上传的主要内容,如果未能解决你的问题,请参考以下文章

angularjs + springmvc 上传和下载

使用 AngularJS 配置 Spring MVC

使用AngularJS配置Spring MVC

如何使用 Spring Security 和 Angularjs 保护 Spring Rest 服务?

AngularJS 和 Spring MVC 安全性

使用 AngularJS 和 Spring Security 的单页应用程序中需要 AntMatchers