Fatal编程技术网
  • java/
  • Java 使用spring boot和angularjs上载文件不起作用

Java 使用spring boot和angularjs上载文件不起作用

java javascript angularjs

Java 使用spring boot和angularjs上载文件不起作用,java,javascript,angularjs,Java,Javascript,Angularjs,我想用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 > <fo

我想用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>
这是我的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:无法读取未定义的属性“name”。想法？

您的Spring控制器方法仅支持POST。。听起来你没有正确地测试它-如果你向不支持该方法的端点发出GET请求，那么应该是405。是的，但我对angularjs是新手，我认为我在angularjs中使用rest服务的方式不正确，不是吗？你能建议如何在angularjs中调用upload方法吗？我不是角度专家，但你有
ng lick=“upload（）
在你的HTML中-这只是一个复制粘贴错误吗？我猜应该是
ng click
；-）我更新了我的帖子，请看一看。我认为这应该是一个新问题，你应该回答自己的问题，或者删除它，如果最初的问题仅仅是因为打字错误。我不是一个角度开发人员，所以不能帮助你有了这一期，祝你好运。 
//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 .');
             });
        }