如何将图像添加到环回模型？

Question

我使用 mongodb(mlab)、loopback 和 angular 4 创建了一篇博文，并且能够在我的 angular 4 站点上显示我的帖子，但是我不知道如何将图像添加到我的环回模型中，如下所示json:
{ “标题”：“字符串”， “作者”：“字符串”， "date": "string",// 类型可以是日期 “正文”：“字符串”， “id”：“字符串” }

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

Answer 1

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

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

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

Answer 2

当您在 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

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

Answer 3

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

文件夹结构：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 操作进行上传和下载。 希望这会好的......如果您需要进一步的说明，我很乐意提供。 干杯...！！