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 回答