-1

我正在尝试使用 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>

指令.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]);
             });
          });
       }
    };
});

控制器.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");
                   })
               };
            }
        }
    )}

服务.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;
});
4

1 回答 1

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单击按钮后将显示语句。

于 2019-12-26T16:17:10.040 回答