1

AngularJS を使用して NodeJS サーバーに画像をアップロードしています。しかし、画像をユーザーに表示する方法がわかりません。アップロードは正常に機能し、サーバー上で画像を見ることができますが、それをクライアント側に戻して表示するにはどうすればよいですか?

HTML:

<img ng-src="{{logo}}" class="col-sm-3" height="100" width="100">
    <div id="dropzone" ng-file-drop="" ng-file-select="" ng-model="files" class="drop-box col-sm-9" 
        drag-over-class="dragover" ng-multiple="false" allow-dir="false"
        accept=".jpg,.png"><b>Drop</b> image here or <b>click</b> to upload</div>
    <div ng-no-file-drop>File Drag/Drop is not supported for this browser</div>

JS: (Angular ng-file-uploadライブラリを使用)

$scope.upload = function (files) {
        if (files && files.length) {
            for (var i = 0; i < files.length; ++i) {
                var file = files[i];
                $upload.upload({
                    url: "api/uploadLogo",
                    file: file
                }).success(function (data, status, headers, config) {
                    console.log("file " + config.file.name + " uploaded. Response: " + JSON.stringify(data));
                    $scope.logo = data;
                });
            }
        }
    };

data成功すると、次のようなものが得られます 。ここに画像の説明を入力

私は何か間違ったことをしていますか？どうすればいいですか？

4

1 に答える 1

0

ファイルの場所を返して、次のような img タグに入力してみてください <img ng-show="data['imgUrl']" ng-src="{{data['imgUrl']}}">

編集: StackOverflow を検索すると、同様の質問が返されました: Angular の UI に画像を表示した後、画像をサーバーに送信します。それが役に立てば幸い。

編集2：

コメントからの要件のより良い理解に基づいて、私の提案は、コントローラーでイメージタグ<img ng-src="data:image/png;base64,{{logo}}" />を使用することです。$scope.image = data

これには、base64 でエンコードされた画像ファイルを返す必要があります。でノードで実行されますvar base64image = new Buffer(imageFile).toString('base64')。ここでは node.js のタグに基づいて node を使用しますが、どの言語でも base64 エンコーディングを実行できるはずです。

于 2015-04-17T16:43:03.230 に答える