Question

我创建了一个使用mongodb（mlab），loopback和angular 4的博客文章，我可以在我的angular 4网站上显示我的帖子，但是我不知道如何将图像添加到我在这里看到的环回模型JSON：
{ ＆＃34; title＆＃34;：＆＃34; string＆＃34;，＆＃34;作者＆＃34;：＆＃34;字符串＆＃34;，＆＃34; date＆＃34;：＆＃34; string＆＃34;，// type可以是date ＆＃34; body＆＃34;：＆＃34; string＆＃34;，＆＃34; id＆＃34;：＆＃34; string＆＃34; }

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

Answer 1

在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 2

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

然后在角度方面，你只需要在img标签的src属性中设置URL。

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

Answer 3

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

文件夹结构：服务器＆gt;存储＆gt; userassests

在我们的用例中，我们在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操作上传和下载。希望这没问题......如果您需要进一步澄清，我很乐意提供。干杯... !!

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

3 个答案: