1

Angular アプリケーション用のファイル アップロードを作成しようとしています。他の多くの一般的な Web サイトと同じように、ユーザーがローカル ファイル システムを参照してファイルをアップロードできるようにしたいと考えています。

クライアント側の対話にangular-file-uploadを使用してきましたが、アップロード用にステージングされたファイルにアクセスするには特定のルートが必要であるため、アプリケーションのセットアップでそれを機能させる方法がわかりません。開発中、アプリケーションは Grunt で提供され、データ用の JAX-RS Web サービスを実行するサーバーにプロキシされます。本番環境では、アプリケーションは Web サービス JAX-RS WAR と同じ JBoss インスタンス内に WAR としてデプロイされます。この状況を考えると、2 つの選択肢があるように感じますが、どちらもうまくいきません。

1) ステージング ルートを持つ Grunt で Express サーバーを立ち上げます。アプリケーションと Web サービスが JBoss 内にデプロイされているため、高速サーバーを本番環境で実行したくないため、これは機能しませんか?

2) ステージング ルートは、他のすべてのルートと同様にプロキシします。明らかに、これはユーザーのローカル ハード ドライブからのアップロードでは機能しません。

私は、機能する別のより良いオプションがあるに違いないと考え続けています。私が望む機能を他のサイトがどのように許可しているかを調べたところ、クライアントがサーバーとの TCP/IP 接続を開始する方法を説明しているこのスレッドが見つかりました。ただし、これが正しいルートかどうかはわかりません。

誰かが洞察を提供できますか？これは私の経験の範囲外であり、いくつかのガイダンスに本当に感謝しています!

前もって感謝します

4

1 に答える 1

3

これを確認してください。ファイル入力に適用するディレクティブ内で $parse を使用して HTML5 fileReader を使用できます。このようにして、ファイルをクライアント側の Angular アプリにアップロードするだけです。たぶん、この例が役に立ちます。

指令：

angular.module('core').directive('onReadFile', ['$parse',
    function($parse){
        return {
            restrict: 'A',
            scope: false, 
            link: function(scope, ele, attrs) {

                var fn = $parse(attrs.onReadFile);
                ele.on('change', function(onChangeEvent){
                    var reader = new FileReader();

                    reader.onload = function(onLoadEvent) {
                        scope.$apply(function(){
                            fn(scope, {$fileContents: onLoadEvent.target.result} )
                        })
                    }

                    reader.readAsText((onChangeEvent.srcElement || onChangeEvent.target).files[0]);
                })

            }
        }
    }
]);

ビューで使用します。

<div>
    <label>Select File</label>
    <input type="file" on-read-file="parseInputFile($fileContents)">
</div>

コントローラー内のファイル データにアクセスします。

$scope.parseInputFile = function(fileText){
    // do whatever you want w/ fileText...
}

バイナリ ファイル (画像) に fileReader を使用することもできます: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

この時点で、ファイル データはクライアント側の Angular コード内にあるため、Java アプリ内のエンドポイントに送信して永続的に保存することができます。

これを学んだブログは次のとおりです。http://veamospues.wordpress.com/2014/01/27/reading-files-with-angularjs/

于 2014-09-05T23:52:22.927 に答える