Question

我想使用spring boot annd angular js上传文件这是我的表格：

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body ng-app="MyCat" ng-controller="CatController >

<form id="main-contact-form" class="contact-form" name="contact-form" method="POST" enctype="multipart/form-data" >
                    <div class="col-sm-5 col-sm-offset-1">
                        <div class="form-group">
                            <label>name *</label>
                            <input type="text" name="name" class="form-control" required="required" ng-model="rap.name">
                        </div>
<!--                        <div class="form-group">  -->
<!--                             <label>DateOfUploade</label> -->
<!--                             <input type="Date" class="form-control" ng-model="rap.dateOfUpload" > -->
<!--                         </div> -->
<!--                            <div class="form-group"> -->
<!--                                <label for="t">Type of File</label> -->
<!--                                <select  -->
<!--                                    class="form-control" id="t" ng-model="rap.type"> -->
<!--                                    <option>.word</option> -->
<!--                                    <option>.xsl</option> -->
<!--                                    <option>.pdf</option> -->
<!--                                </select> -->
<!--                            </div>  -->

                            <div class="form-group">
                            <label>file</label>
                            <input type="file" name="file" class="form-control" ng-model="rap.file">
                        </div>                        

                        <div class="form-group">
                            <button type="submit"  class="btn btn-primary btn-lg"  ng-click="upload()">Import File</button>
                        </div>
<!--                         <div class="form-group">  -->
<!--                             <button type="submit"  class="btn btn-primary btn-lg"  ng-click="SaveReports()">SaveReports</button> -->
<!--                         </div> -->
                    </div> 
<!--                        <table class="table"> -->
<!--                            <tr> -->
<!--                                <th>NameOfUploader</th> -->
<!--                                <th>DateOfUpload</th> -->
<!--                                <th>TypeOfFile</th> -->
<!--                                <th>File</th> -->
<!--                            </tr> -->
<!--                            <tr ng-repeat="rap in reports"> -->
<!--                                <td>{ {rap.NameOfUploader}}</td> -->
<!--                                <td>{ {rap.DateOfUpload}}</td> -->
<!--                                <td>{ {rap.TypeOfFile}}</td> -->
<!--                                <td>{ {rap.File}}</td> -->
<!--                            </tr> -->
<!--                        </table> -->

                    </form> 
<script type="text/javascript" src="angular/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>

</body>
</html>

这是我的控制器java

//upload Files

    @RequestMapping(value="/upload", method=RequestMethod.POST)
    public @ResponseBody String handleFileUpload(@RequestParam("name") String name,@RequestParam("file") MultipartFile file){
        if (!file.isEmpty()) {
            try {
                byte[] bytes = file.getBytes();
                BufferedOutputStream stream =
                        new BufferedOutputStream(new FileOutputStream(new File(name)));
                stream.write(bytes);
                stream.close();
                return "You successfully uploaded " + name + "!";
            } catch (Exception e) {
                return "You failed to upload " + name + " => " + e.getMessage();
            }
        } else {
            return "You failed to upload " + name + " because the file was empty.";
        }
    }

这是我的js控制器

//Upload files
        $scope.upload=function(rap){

             $http.post("http://localhost:8080/upload?$name="+rap.name+"$file="+rap.file)      
             .success(function(){
                 console.log('Post Succeded !');
             })
             .error(function(){
                 console.log('Post Failed .');
             });
        }

当我在chrome中运行应用程序时，我使用开发工具，当我点击ImportReports时，我有TypeError：无法读取属性＆＃39; name＆＃39;未定义的。想法？

使用spring boot和angularjs无法上传文件

0 个答案: