10

我尝试使用角度上传器，它使用 npm 下载它，然后在单个文件中浏览它。错误详情可以看这里

我无法理解这些错误，因为现在我还是 AngularJS 的新手。这是我的代码

var angular = require('angular');
angular
    .module('jobApp', [require('angular-material'), require('ng-file-upload')])
    .controller('MainCtrl', ['$rootScope', '$scope', '$mdToast', '$animate', '$http', '$timeout', '$q', '$log', 'Upload',
        function($rootScope, $scope, $mdToast, $animate, $http, $timeout, $q, $log, Upload) {
        'use strict';
        // Initialize the scope variables
        $scope.$watch('files', function () {
            $scope.upload($scope.files);
        });
        $scope.upload = function (files) {
            if (files && files.length) {
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    Upload.upload({
                        url: 'http://sr-recruit.herokuapp.com/resumes',
                        fields: {
                            'name': $scope.name,
                            'email': $scope.email,
                            'about': $scope.about
                        },
                        file: file
                    }).progress(function (evt) {
                        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                        $scope.log = 'progress: ' + progressPercentage + '% ' +
                                    evt.config.file.name + '\n' + $scope.log;
                    }).success(function (data, status, headers, config) {
                        $scope.log = 'file ' + config.file.name + 'uploaded. Response: ' + JSON.stringify(data) + '\n' + $scope.log;
                        $scope.$apply();
                    });
                }
            }
        };
    }]);

更新

现在正在使用 Browserify-shim 以 Commonjs 格式正确包含 Angular-file-upload。感谢@ryan Johnson。

这是 package.json

{
    "browser": {
        "angular": "./node_modules/angular/angular.js",
        "ng-file-upload": "./node_modules/ng-file-upload/dist/ng-file-upload-all.js"
    },
    "browserify-shim": {
        "angular": {
            "exports": "angular"
        },      
        "ng-file-upload": {
            "exports": "angular.module('ngFileUpload').name"
        }
    },
    "browserify": {
        "transform": [
            "browserify-shim"
        ]
    }
}

我仍然是错误

TypeError: Cannot read property '' of undefined

不知道为什么。仅供参考，我使用 browserify 内置的 Laravel-elixir 来运行任务。

4

1 回答 1

19

我注意到您正在使用require('ng-file-upload')包含该模块。即使该ng-file-upload模块可通过 npm 获得，下载的 JS 文件也不是 commonJS 格式。

为了require('ng-file-upload')在您的示例中工作，源文件需要像这样导出模块：

module.exports = angular.module('ng-file-upload').name;

由于您包含的文件不是这种情况，因此您需要填充它以与 Browserify 一起使用。这是一篇关于使用 Browserify 正确填充 AngularJS 应用程序的好文章。

于 2015-06-12T03:44:05.343 回答