angularjs - Angularjs - angularjs-file-upload を meanjs ライブラリに追加する方法

Question

meanjsを使用してdanialfaridの angularjs-file-uploadを実装しようとしています。しかし、それは機能していません。

meanjsで使用することは可能ですか??

Answer 1

angularjs-file-upload モジュールをプロジェクトに含める手順を見逃しているようです。このモジュールまたは外部の angular モジュールを 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- これで、angular コントローラーで 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のようなライブラリを使用して、ファイルのアップロードでリクエストを処理できるようにサーバー側のアプリまたはルートを構成する必要はありません。