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

我是angularJS新手，尝试使用angularJS和SpringMVC上传文件，但无法获得所需的解决方案，最终在JS控制器中出现异常

下面是代码，看一下，请帮我。多谢各位

ApplicationContext.xml

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="10000000" /> <!-- setting maximum upload size -->
</bean>

Java控制器：

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

$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');
    });
}

@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]

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

例外情况：

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

$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');
    });
}

@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]

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

---

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

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

$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');
    });
}

@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]

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

---

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

将这些

.js

文件添加到您已添加的

angular.js

文件

angular file upload.js

，

angular file upload shim.js

，

ng file upload shim.js

你可以从这个链接下载

然后在

angular.module

中添加

ngFileUpload，'angularFileUpload'

angular.module('formSubmit', [ 'ngFileUpload',
            'angularFileUpload',  'ui.router' ]);

然后像这样在角度控制器中添加

$upload

app.controller('FormSubmitController', function($scope, $http, $upload)

在代码中使用

$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 "";
}

---

您的错误很明显

预期的MultipartTtpServletRequest:是否配置了MultipartResolver？

@请参阅@EddieB已更改，但仍给出相同的异常“已更改”

？

您需要

配置一个MultipartResolver

@更多信息@EddieB更新了更改，请查看原始版本<代码>多部分解析器已解析。您需要遵循SO规则，针对

新问题

已更改但仍给出相同的异常发布新问题。我认为您的多部分异常现在已解决，当前问题可能在您的请求对象中。否。。现在它给出了一些不同的例外。。我更新了问题，看看“QuestionBean”是你的实体类吗？如果是，则实现可序列化，如此链接中所示：。让我知道它是否对你有用you@hrdkisback-我正在尝试与您在回答中提到的完全相同的功能..即使是我也面临着错误。它在控制台中显示错误错误：[$injector:unpr]未知提供程序：$uploadProvider这是什么

yourFile

？在您的情况下，您必须用此代码

文件替换。文件[0]

在控制台中显示错误

错误：[$injector:unpr]未知提供程序：$uploadProvider我已编辑我的答案，请按照所有步骤操作。我使用了确切的文件和建议的控制器参数列表。我收到一个
400（错误请求）
有什么建议吗？