Angularjs - 如何将 angularjs-file-upload 添加到meanjs 库

Question

我正在尝试实现danialfarid的 angularjs-file-upload使用meanjs。但它没有工作。

可以和meanjs一起使用吗？

Answer 1

您应该能够使用它，看起来您错过了将 angularjs-file-upload 模块包含到项目中的步骤，因此以下是在 MeanJS 应用程序中包含此模块或任何外部 Angular 模块的步骤:

1-安装 angularjs-file-upload 后，使用以下命令通过 Bower 上传文件:

bower install ng-file-upload --save

2-您应该在应用程序布局页面中添加引用 angularjs-file-upload.js 文件，这是在文件中完成的:config\env\all.js，您应该具有像这样的行:

assets: {
        lib: {
            css: [
                'public/lib/bootstrap/dist/css/bootstrap.css',
                'public/lib/bootstrap/dist/css/bootstrap-theme.css'               
            ],
            js: [
                'public/lib/ng-file-upload/angular-file-upload-shim.min.js',
                'public/lib/angular/angular.js',
                'public/lib/ng-file-upload/angular-file-upload.min.js',

3-那么你应该将 angularjs-file-upload 作为依赖项包含在你的 Angular 应用程序中，这是在文件中完成的:public\config.js，在末尾添加“angularFileUpload”此行中的数组:

var applicationModuleVendorDependencies = ['ngResource', 'ngCookies',  'ngAnimate',  'ngTouch',  'ngSanitize',  'ui.router', 'ui.bootstrap', 'ui.utils', 'angularFileUpload'];

4-您现在应该能够在您的 View 中使用文件 uploader ，如果未完成下一步，请重试。

5-如果您想在 Controller 中使用 angularjs-file-upload 服务，您应该在模块注册中注入(inject)上传服务($upload)，如下所示:

angular.module('myModuleName').controller('MyController', ['$scope', '$stateParams', '$location', 'Authentication', '$upload',
    function ($scope, $stateParams, $location, Authentication, $upload) {
// your controller code goes here
});

6-现在你应该可以在你的 Angular Controller 中使用来自 angularjs-file-upload 的 $upload 服务，如下所示:

 $upload.upload({
                url: '/serverRouteUrl', //upload.php script, node.js route, or servlet url
                method: 'POST', //Post or Put
                headers: {'Content-Type': 'multipart/form-data'},
                //withCredentials: true,
                data: JsonObject, //from data to send along with the file
                file: blob, // or list of files ($files) for html5 only
                //fileName: 'photo' // to modify the name of the file(s)                
            }).success(function (response, status) {
                   //success 
                }
            ).error(function (err) {
                   //error
                }
            );

这将全部来自客户端，而不是您必须配置服务器端应用程序或路由才能使用像 Multer 这样的库来处理文件上传请求。就可以了。