Angularjs文件上传代码错误

时间:2017-05-02 06:08:59

标签: angularjs

我在angularjs文件上传时遇到错误。

这是我的代码:

html

我在控制台日志中收到错误:

angular.js:10765 POST http://localhost/kites/upload/ 404 (Not Found)

1 个答案:

答案 0 :(得分:1)

使用此代码

用简单的话说

在Html - 中仅添加以下代码

     <form name="upload" class="form" data-ng-submit="addFile()">
  <input type="file" name="file" multiple 
 onchange="angular.element(this).scope().uploadedFile(this)" />
 <button type="submit">Upload </button>
</form>
控制器中

- 点击“上传文件按钮”时会调用此功能。它会上传文件。你可以安慰它。

$scope.uploadedFile = function(element) {
$scope.$apply(function($scope) {
  $scope.files = element.files;         
});
  // console.log($scope.files)  
  //  uploaded file is in  $scope.files

}

在控制器中添加更多 - 下面的代码添加到该功能中。当您单击使用“点击api(POST)”的按钮时,将调用此函数。它会将文件(上传)和表单数据发送到后端。

var url = "https://192.3.3.22/api/vi/userapi/reporttojson"
// use can put you api in 'url' variable
        var files=$scope.files;

         for ( var i = 0; i < files.length; i++)
         {
            var fd = new FormData();
             angular.forEach(files,function(file){
             fd.append('file',file);
             });
             var data ={
              msg : message,
              sub : sub,
              sendMail: sendMail,
              selectUsersAcknowledge:false
             };

             fd.append("data", JSON.stringify(data));
              $http.post(url, fd, {
               withCredentials : false,
               headers : {
                'Content-Type' : undefined
               },
             transformRequest : angular.identity
             }).success(function(data)
             {
                  toastr.success("Notification sent successfully","",{timeOut: 2000});
                  $scope.removereport()
                   $timeout(function() {
                    location.reload();
                }, 1000);

             }).error(function(data)
             {
              toastr.success("Error in Sending Notification","",{timeOut: 2000});
              $scope.removereport()
             });
        }

在这种情况下..我在下面添加了代码作为表单数据

var data ={
          msg : message,
          sub : sub,
          sendMail: sendMail,
          selectUsersAcknowledge:false
         };