問題タブ [ng-file-upload]

Yeoman scaffolded meanjs.org アプリケーションに ng-file-upload をインストールするのに苦労しました。Bower のインストールで構成が完了せず、「アップロード」依存関係のあるコントローラーを使用してビューをロードしようとすると、エラーが発生しました。カスタムモジュールをangularにインストールしようとしたのはこれが初めてでした。私はこの投稿を作成して、この場合の特定の指示を与え、同様の立場にある人々に一般的な情報を共有して、スキャフォールディングされたプロジェクトを他のディレクティブで拡張する方法を正確に理解できるようにしようと考えました。

解決策を探していると、angular-file-upload への参照がたくさん見つかりました。これは別のパッケージか古いバージョンのどちらかなので、使用しないでください。

この記事の時点での ng-file-upload のバージョンは 7.0.17 です。必要な場合がある ng-file-upload-shim もインストールしました。フラッシュを使用して非 html5 ブラウザにファイル アップロードのサポートを追加します。

ステップ 1 - ng-file-upload ソースを取得します。

angular のすべてのモジュールとディレクティブはフォルダーに入っています。https://github.com/danialfarid/ng-file-uploadの github からフォルダーをダウンロードするか、 bower/npm を使用できます。

bower install ng-file-upload-shim --save bower install ng-file-upload --save npm install ng-file-upload

Bower はフロント エンド (Angular) の依存関係を処理し、フォルダーを public/lib/ng-file-upload および public/lib/ng-file-upload-shim に配置します。手動でダウンロードする場合は、ここに移動する必要があります。

ステップ 2 - アプリ構成ファイルを更新します。

わかりにくかった部分です。Bower は最新バージョンのソースと依存関係をインストールしますが、構成ファイルは更新しません。少なくとも、現時点では ng-file-upload には対応していません。

a) /public/modules//config.js にある config.js を更新します。

yo meanjs:angular-module を使用すると、これらのファイルが作成されます。次のような行が表示されます。

var applicationModuleVendorDependencies = ['ngResource', .... など

そのリストに「ngFileUpload」を追加する必要があります。これにより、モジュールの依存関係が定義されます。

これだけを行うと、エラー メッセージが表示されます。

[$injector:nomod] モジュール 'ngFileUpload' は利用できません! モジュール名のつづりを間違えたか、モジュールをロードするのを忘れました。モジュールを登録する場合は、依存関係を 2 番目の引数として指定してください。

ngFileUpload は ng-file-upload フォルダーにあるスクリプト ファイルで定義されているため、何らかの方法でファイル システム上のファイルの場所が通知されない限り、明らかに angular は ngFileUpload が何であるかを知ることができません。

b) /config/env/all.js にある all.js を更新します。

ここで、ファイル システムに含めるファイルを angular に指示します。2 行が必要で、特定の順序にする必要がある場合があります (他の情報源から読んだところ、それは古いバージョンのものだった可能性があります)。いずれにせよ、all.jsで、

それを次のように置き換えます。

c）適切な名前で依存関係をモジュールに挿入します

コントローラーで ngFileUpload を注入すると思うかもしれませんが、注入に使用する必要がある名前は「Upload」です。

正しい形式のサンプル コントローラーを次に示します。

ご覧のとおり、「アップロード」と呼ばれます。ドル記号などはありません。古いバージョンでは $upload を使用していましたが、変更されました。

d) 楽しむ

うまくいけば、これは誰かがこれを理解しようとして立ち往生するのに役立つでしょう.

私のHTMLコード：

そして私のAngularコード

コードをデバッグし、デバッグ中に両方のファイルを取得しました。しかし、それは私のC＃メソッドを呼び出していません

ここで何が問題なのですか？
単一の画像をアップロードしようとすると、機能しています。

ファイル アップロードを Angular ng-File-Upload モジュールと Node.js サーバーで動作させるのに問題があります。例では、「file」または「files」属性 (req.file または req.files) を介して、クライアント要求で発生したファイルにアクセスできる必要があると述べています。ただし、要求時のそのような属性は「未定義」です。クライアント要求にファイルの痕跡が見つかりません。

私のクライアント側のコードは次のようになります。

アップロード用の HTML の行は次のようになります。

サーバー側は現在、次のようになっています。

上記のコンソール ログはどちらも「未定義」を返します。これを修正する方法/ファイルをアップロードするためのより良い方法について誰かが考えているなら、私は非常に感謝しています.

ng-file-uploadを使用して、Angular クライアントからノード/エクスプレス サーバーに画像をアップロードしています。

画像はロードされていますが、「成功」メソッドが呼び出されておらず、画像のアップロードが複数回呼び出されているように見えるため、画像がサーバーに繰り返しアップロードされています。

ここに私のHTMLフォームがあります:

ここに私のJSがあります：

これが私のサーバー側のコードです：

シムライブラリを最初に含める必要があることをどこかで読みましたが、ロードオーダーを交換しようとしましたが、喜びはありませんでした。ここに私のインポート行があります:

また、Chrome デバッグ ツールを調べると、アップロードのステータスが「保留中」と表示されます。画像は間違いなくサーバー上にあり、進行状況バー (html 内) は 100% を示しています。しかし、1 分ほど後に、イメージの別のコピーがフォルダーに表示され (この動作はループしているように見えます)、ng-file-upload の「成功」イベントは呼び出されません。

助けてくれてありがとう。

ng-file-upload を使用して、画像をプレビューおよびアップロードしています。画像をアップロードする前に、ユーザーに画像をトリミングしてもらいたいと思います。ng-img-crop を使用してみましたが、必要な機能 (アスペクト比のカスタマイズ) がありませんでしたが、cropper にはありました ( https://github.com/fengyuanchen/cropper/ )。私の唯一の問題は、クロッパーを使用して画像のプレビューをトリミングする方法です。画像 src は最終的にブロブ、つまり「blob:XYZ」になります。この方法でクロッパーをうまく使用した人はいますか? 出来ますか？