Question

我正在尝试使用ng-file-upload https://github.com/danialfarid/ng-file-upload

我使用了基本设置：

HTML：

<section ng-controller="MyController">

    <form name="form">
                    Single Image with validations
                    <div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'"
                    ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100" 
                    ngf-resize="{width: 100, height: 100}">
                        Select
                    </div>
                    Multiple files
                    <div class="button" ngf-select ng-model="files" ngf-multiple="true">
                        Select
                    </div>
                    Drop files:<div ngf-drop ng-model="files" class="drop-box">Drop</div>
                    <button type="submit" ng-click="submitUpload()">submit</button>
                </form>
</section>

JS：

var app = angular.module('myApp', ['ui.router', 'ngAnimate', 'ngFileUpload'], function($interpolateProvider) {
    $interpolateProvider.startSymbol('{[{');
    $interpolateProvider.endSymbol('}]}');
});

app.controller('MyController', function ($scope, RESTService) {


// upload later on form submit or something similar
$scope.submitUpload = function() {
  if ($scope.form.file.$valid && $scope.file) {
    $scope.submitUpload($scope.file);
  }
};

// upload on file select or drop
$scope.upload = function (file) {
    Upload.upload({
        url: 'upload/url',
        data: {file: file, 'username': $scope.username}
    }).then(function (resp) {
        console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
    }, function (resp) {
        console.log('Error status: ' + resp.status);
    }, function (evt) {
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
        console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
    });
};

});

我可以通过Windows浏览器选择文件，但是，当我点击提交时，我收到以下错误：

TypeError: Cannot read property 'file' of undefined

Answer 1

用JSFiddle伴随你的问题会很棒。

然而，这些代码行很可能会导致问题：

// upload later on form submit or something similar
$scope.submitUpload = function() {
  if ($scope.form.file.$valid && $scope.file) {
    $scope.submitUpload($scope.file);
  }
};

我相信在 submitUpload 函数中，您应该调用 upload 函数，因为否则您只是通过额外的参数递归调用相同的函数。

如果这对您的问题没有帮助，请与我们联系。

ng-file-upload无法读取属性＆＃39; file＆＃39;未定义的

1 个答案: