問題タブ [ng-flow]

ng-flow のダウンロードで提供される単純な画像アップロードの例に基づいて、単純なドラッグ アンド ドロップ効果を使用しています。.post()ドラッグ アンド ドロップは正常に機能していますが、フォーム送信アクションまたは Angular関数を使用して画像をアップロードしたいので、デフォルトのアップロード アクションを停止したいと思います。

event.preventDefault(); を使用しようとしました。「fileAdded」および「filesSubmitted」イベント ハンドラーで、これはアップロード開始イベントを停止していません。フォーム送信処理中にアップロード処理を実行したい。

「fileAdded」イベントで「return false」を使用すると、画像がまったく挿入されません。

ただし、「filesSubmitted」イベント ハンドラーにエラーを挿入すると、スクリプトは失敗し、アップロードはトリガーされません。しかし、これはこの効果を達成するためのクリーンな方法ではありません。

このコードも使用しましたが、画像がページに追加されません。

詳細については、以下のスナップショットを参照してください。

この問題を解決するためにあなたの助けに感謝します.

私は ng-flow ファイルのアップロードを使用しています:

https://github.com/flowjs/ng-flow

私のコードに問題があるか、問題があるようです。私の作品は、ダウンロードで提供される基本的なイメージ サンプルに基づいています。

1 つのアプリケーションと 2 つのコントローラーを使用して 2 つの画像をアップロードできるページを作成しようとしています。各画像は署名画像で、1 つは評価者用、もう 1 つは監督者用です。

何を試してもうまくいきません。

2 つの画像にはそれぞれ 1 つの個別のドロップ領域があり、1 つの画像のように扱われます。画像を要素のいずれかにドロップするたびに、ファイルのプレビューは両方で同じになります。

1 つのコントローラーと 2 つのコントローラーを使用しようとしましたが、結果は同じです。1 つの画像が 2 つの要素に表示されます。

以下のスナップショットとコード サンプルを参照してください。

あなたの助けに感謝。

入力を使用して画像をロードし、それをデータ uri 形式に変換してngImgCropディレクティブに渡し、その画像をトリミングしています。

これまでのところ、これはすべて機能していますが、ngFlowを使用して data uri 形式のトリミングされた画像をアップロードしようとして苦労しています。

私はいくつかの方法を試しましたが、成功しませんでした.誰かがこれを行うことができましたか?

.addFile()メソッドを使用してデータ uri 形式で画像を渡そうとしましたが、この方法では機能しません。

私は symfony REST fromework が初めてです。私たちのプロジェクトでは、ng-upload を使用して画像をアップロードしています。以下は、その原因となるコードです。

// HTML

// コントローラー内 (フロントエンド)

// バックエンド コード - UnitController.php

//FlowJSHelper.php

エラー私はこのようになっています。

ng-flow-standalone.js:1249 GET http://localhost:30080/api/v1/units/5732fa2dec045be8448b457d/photos?flowChu …st1jpg&flowFilename=test1.jpg&flowRelativePath=test1.jpg&flowTotalChunks=1 404 (見つかりません)

更新 1: サーバー側でクロス ドメイン アクセスを許可します。
更新 2: セキュリティを無効にして chrome を使用してアップロードしてみてください。

target同じドメインの URL に設定されている場合、ngFlow を正常に使用しました。問題は、ファイアウォールのセットアップがあり、アップロードをブロックするファイアウォールによって画像が特定のパターンに一致するためにアップロードがランダムに失敗し、画像がサーバーに送信されないことです。奇妙なことは、エラーがクライアントに報告されないことです。アップロードが停止します。

ネットワーク管理者によると、ファイアウォールをバイパスするには、別のドメインである別の URL にアップロードを送信する必要があります。別のドメインの絶対 URLを設定するtargetと、アップロード プロセスの実行時に Chrome で次のエラーが発生します。

XMLHttpRequest はhttps://blabla/PhotoUploadCmd?imageOperation=u …tjpg&flowFilename=Desert.jpg&flowRelativePath=Desert.jpg&flowTotalChunks=1 を読み込めません。プリフライト要求への応答がアクセス制御チェックに合格しません: 要求されたリソースに 'Access-Control-Allow-Origin' ヘッダーが存在しません。したがって、オリジン「http://10.100.22.111:8282」へのアクセスは許可されていません。

これは、ng-flow を構成するコード部分です。

ファイアウォールの問題は UAT マシンでのみ発生していることに注意してください。ローカルの Tomcat サーバーでアップロードをテストすると、問題なく動作します。

私も次のことを試しました：

• JSP に次のコード行を追加しましたが (これは内部フレームの一部として読み込まれます)、それでも同じエラーが発生しますNo 'Access-Control-Allow-Origin' header is present on the requested resource。

コード：

• セキュリティを無効にしてクロムを開こうとしました：

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\path-to-data-folder\Chrome"

上記の方法を使用すると、別のドメインにアップロードできましたが、Chrome で警告が表示されましたYou are using unsupported command-line flag...。言うまでもなく、この方法は本番環境での使用には適していません。

ファイアウォールの問題を解決する方法、または ng-flow がアップロードを実行してクロスドメイン アクセスを許可する方法を知っている場合は、お知らせください。

タレク