0

我使用 mongodb(mlab)、loopback 和 angular 4 创建了一篇博文，并且我能够在我的 angular 4 站点上显示我的帖子，但是我不知道如何将图像添加到我的环回模型中，这里显示为 json：
{ "title": "string", "author": "string", "date": "string",// 类型可以是日期 "body": "string", "id": "string" }

没有图像属性类型，所以我很困惑如何将我的图像 url 添加到我的环回数据模型中，以便在我的 angular 4 博客上显示它。我可以<img *ngIf="post.id === '599ce3147e0f7a32c812a6ac'" src="http://drvidyahattangadi.com/wp-content/uploads/2014/12/panchkarma3.jpg" alt="">为每个帖子 ID 使用，但如果我有很多帖子，这将非常低效。任何人都可以帮忙吗？

4

3 回答 3

4

当您在 Loopback 中使用 Image 类型的对象时，推荐的方法是为您的 Loopback 应用程序创建组件存储。

npm install loopback-component-storage --save

您只需要提供一系列答案，例如 CLI 中的以下代码。

$ slc loopback:datasource
[?] Enter the data-source name: storage
[?] Select the connector for storage: other
[?] Enter the connector name without the loopback-connector- prefix: loopback-component-storage
[?] Install storage (Y/n)

在 datasource.json 文件中，您的存储条目将被添加。

"storage": {
  "name": "storage",
  "connector": "loopback-component-storage",
  "provider": "filesystem",
  "root": "./files"
}

创建所需的“模型”后，您可以简单地使用文件结构来下载和上传图像。

ex:
POST /api/containers/container-name/upload

以下链接将帮助您逐步创建环回中的组件存储和图像上传/下载功能。

于 2017-08-23T10:23:35.213 回答
1

如果我很好地理解了你的问题，你想为你的角度前端提供图像。在我工作的所有项目中，我们都没有将图像保存在数据库中。我们将图像保存在服务器硬盘上并将 URL 添加到数据库中。

然后在 angular 端，只需要在 img 标签的 src 属性中设置 URL 即可。

如果您有很多图像，您可以使用另一台服务器来提供图像以提高效率。

于 2017-08-23T07:31:17.967 回答
0

您可以在“server”下创建的“storage”文件夹中创建文件夹调用“userassets”

文件夹结构：服务器>存储>用户评估

在我们的用例中，我们将这个环回应用程序托管在 docker envioronment.in docker-compose.yml 文件中，我们将 storage/userassest 文件夹挂载到服务器位置。

之后，您可以简单地调用角度上传功能，如下所示。使用角度上传功能，您将获得文件输入，您可以使用上传指令来完成操作。

 $scope.uploadPic = function (file) {
            Upload.upload({
              url: '/api/containers/userassets/upload',
              file: file
            }).then(function (response) {
              $scope.orgLogo = "/api/containers/userassets/download/" + response.data.result.files.file[0].name;
              file.result = response.data;
              $timeout(function () {
                $scope.result = response.data;
              });
            }, function (response) {
              if (response.status > 0) $scope.errorMsg = response.status + ': ' + response.data;
            }, function (evt) {
              // You can get upload progress here
              file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
            });
          }

执行此代码行后，您的图像资产将转移到服务器安装位置，并且在应用程序级别也保存在 storage/userassets 文件夹中。

然后您可以使用 API 操作进行上传和下载。希望这会好的......如果您需要进一步的说明，我很乐意提供。干杯...！！

于 2017-08-23T16:37:19.953 回答