AngularJS无法显示上传文件日志[重复]答案

【问题标题】：AngularJS Unable to display upload file logs [duplicate]AngularJS无法显示上传文件日志[重复]
【发布时间】：2020-04-16 17:51:36
【问题描述】：

我正在尝试使用 angularjs 创建一个文件上传功能，它只会接受文件并将其发送到服务器端（Django）。为确保文件上传功能正常工作，我在多个位置放置了多个 console.log。但是，不会显示任何日志。这是我的代码：

.html:

<body ng-app="myApp" ng-controller="appCtrl">
     <input type="file" id="file" name="files" accept="text/*" 
            data-url="file" class="inputfile_upload"
            ng-model="uploadedFile"/>
     <label for="file"> <span id="chooseFile"></span>Upload a file!</label>
     <button id="submitBtn" type="submit" ng-click="upload()"
             ng-model="uploadBtn">Upload</button>
</body>

directive.js：

app.directive("appDirective", function() {
    return {
       restrict: 'A',
       link: function(scope, element, attrs) {
          var model = $parse(attrs.appDirective);
          var modelSetter = model.assign;
          element.bind('change', function() {
             scope.$apply(function() {
                modelSetter(scope, element[0].files[0]);
             });
          });
       }
    };
});

controller.js：

var app = angular.module('myApp', [])
app.controller('appCtrl', function ($scope, $rootScope, $http, fileUploadService){
    $scope.$watch('uploadBtn', function (newVal, oldVal) {
        var submitBtn = document.getElementById('submitBtn');    
        $scope.upload = function() { 
            if(newVal == true){
                $scope.upload = function() { 
                   var file = $scope.uploadedFile; 
                   console.log('file is ' );
                   console.dir(file);
                   var uploadUrl = "/file";
                   fileUploadService.uploadFileToUrl(file, uploadUrl);
                   $http({
                     method:'GET'
                   })
                   .success(function(data) {
                     console.log("success");
                   })
                   .error(function(data){
                     console.log("failed");
                   })
               };
            }
        }
    )}

Service.js：

app.factory('fileUploadService', function ($rootScope, $http) {
   var service = {};
   service.uploadFileToUrl = function upload(file, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(){
        console.log("Files added");
        })
        .error(function(){
        console.log("Files not successfully added");
        });
    }
    return service;
});

【问题讨论】：

重新阅读$http服务的文档
@AlonEitan 哪一部分错了？我的controller.js？
控制器和服务，$http.post()返回一个promise，应该是$http.post().then(function(response) { <success logic> }, function(response) { <error logic> });
@AlonEitan 我已经尝试过了，但我仍然没有显示任何内容
.success 方法一直是removed from the AngularJS framework。

标签： angularjs angularjs-directive angularjs-service angularjs-controller angularjs-fileupload

【解决方案1】：

ng-model 指令不适用于<button> 元素：

 <button id="submitBtn" type="submit" ng-click="upload()"
         ̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶u̶p̶l̶o̶a̶d̶B̶t̶n̶"̶ >Upload</button>

只需将函数分配给$scope.upload：

var app = angular.module('myApp', [])
app.controller('appCtrl', function ($scope, $rootScope, $http, fileUploadService){
    ̶$̶s̶c̶o̶p̶e̶.̶$̶w̶a̶t̶c̶h̶(̶'̶u̶p̶l̶o̶a̶d̶B̶t̶n̶'̶,̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶n̶e̶w̶V̶a̶l̶,̶ ̶o̶l̶d̶V̶a̶l̶)̶ ̶{̶ 
        ̶v̶a̶r̶ ̶s̶u̶b̶m̶i̶t̶B̶t̶n̶ ̶=̶ ̶d̶o̶c̶u̶m̶e̶n̶t̶.̶g̶e̶t̶E̶l̶e̶m̶e̶n̶t̶B̶y̶I̶d̶(̶'̶s̶u̶b̶m̶i̶t̶B̶t̶n̶'̶)̶;̶
        ̶$̶s̶c̶o̶p̶e̶.̶u̶p̶l̶o̶a̶d̶ ̶=̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶(̶)̶ ̶{̶
            ̶i̶f̶(̶n̶e̶w̶V̶a̶l̶ ̶=̶=̶ ̶t̶r̶u̶e̶)̶{̶
                $scope.upload = function() { 
                   var file = $scope.uploadedFile; 
                   console.log('file is ' );
                   console.dir(file);
                   //...
                };
    //...
})

console.log 语句将在单击按钮时显示。

【讨论】：

<input type="file"> 元素不适用于 ng-model 指令而没有自定义指令。查看标记的重复项，并在需要时提出新问题。