0

こんにちは、angular-fullstack ジェネレーターを使用して webapp を作成しています。

これで、この方法で画像をアップロードしました。アップロードにはng-file-uploadを使用しました。

//server/picture.contoller.js
    exports.upload = function (req, res) {
        //Crate Picture on db
        Picture.create(req.body, function (err, picture) {
            if (err) {
                return handleError(res, err);
            }
            var newPath = appRoot + "/public/uploads/img";
            var filePath = newPath + '/' + picture._id;
            var fileName = req.files.file.name;
            var extension = '.' + fileName.substr((~-fileName.lastIndexOf(".") >>> 0) + 2);
            filePath = filePath + extension;
            var serverPath = '/public/uploads/img/' + picture._id+extension;
            console.log(' Name:' + filePath);
            fs.readFile(req.files.file.path, function (err, data) {
                if (err) {
                    return handleError(res, err);
                }
                fs.writeFile(filePath, data, function (err) {
                    if (err) {
                        return handleError(res, err);
                    }

                });
            });
            Picture.findById(picture._id, function (err, pictureToUpdate) {
                if (err) {
                    return handleError(res, err);
                }
                if (!pictureToUpdate) {
                    return res.status(404).send('Not Found');
                }
                console.log("Picture to update: " + pictureToUpdate);
                var updated = _.extend(pictureToUpdate, {path: serverPath});
                updated.save(function (err) {
                    console.log('Picture after update: ' + updated);
                    if (err) {
                        return handleError(res, err);
                    }
                });
                return res.status(201);
            });
        });
    };

そして、routes.js を編集して以下を追加します。

app.use('/public', express.static(__dirname + '/public'));

したがって、公開ディレクトリは静的でアクセス可能でなければなりません。

私は自分の画像をビューに入れようとします：

<div class="row" ng-repeat="picture in images">
            <div class="col-md-4"><img ng-src="{{picture.path}}"></div>
            <div class="col-md-4"><label><b>Titel:</b>{{picture.title}}</label><br><label><b>Größe</b>(BxH)<b>:</b> {{picture.width}}x{{picture.height}}</label></div>
        </div>

コントローラ：

 $http.get('/api/pictures').success(function (data) {
          $scope.images = data;
        });

コンソールには、コード 200 のリクエストが表示されます。

> GET /api/pictures 304 5ms GET
> /public/uploads/img/566716a19646eb3a214977e3.jpg 200 7ms

しかし、ブラウザは画像を表示しません。

私の失敗はどこですか？何かヒントはありますか？

たぶん、これを行う別のより良い方法がありますか？

前もってありがとうドミニク

4

2 に答える 2

0

わかりました理由はわかりませんが、今ではうまくいくようです。

私が変更され

app.use('/public', express.static(__dirname + '/public'));

に

app.use( express.static(__dirname + '/public'));

保存したパスから/public部分を削除すると、画像にアクセスできるようになりました。

于 2015-12-09T16:07:08.140 に答える
0

遅延画像ディレクティブを使用します。

angular.module('common')
    .directive('azLater', ['$timeout', function ($timeout) {
      return {
        restrict: 'A',
        replace: true,
        template: '<img />',
        scope: {
          later: '=azLater'
        },
        link: function (scope, element, attrs) {
          element[0].src = '/res/missing_photo.jpg';//missing...
          $timeout(function () {
            var src = scope.later;

            if (src) {
              element[0].src = src;
            }

          }, 100);
        }
      };
    }]);

そして、あなたのhtmlで：

<div class="row" ng-repeat="picture in images">
        <div class="col-md-4"><img az-later="picture.path"></div>
</div>
于 2015-12-08T19:00:32.697 に答える