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

Question

我试图使用meanjs实现danialfarid的 angularjs-file-upload.但它不起作用.

是否可以将它与meanjs一起使用？

Answer 1

您应该可以使用它,看起来您错过了将angularjs-file-upload模块包含到项目中的步骤,因此这里是在MeanJS应用程序中包含此模块或任何外部角度模块的步骤:

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-然后你应该在angular应用程序中包含angularjs-file-upload作为依赖项,这在文件中完成:public\config.js,在此行的数组末尾添加'angularFileUpload':

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

4-您现在应该能够在视图中使用文件上传器,如果还没有完成,则下一步再尝试一次.

5-如果你想在你的控制器中使用angularjs-file-upload服务,你应该在模块注册中注入上传服务($ upload),如下所示:

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

6-现在你应该是苹果在你的角度控制器中使用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这样的库可以解决问题.