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

我创建了一个使用mongodb（mlab），loopback和angular 4的博客文章，我能够在我的angular 4站点上显示我的帖子，但是我不知道如何将图像添加到我的环回模型中，：
{ “称号”： “串”， “作家”： “串”， “日期”： “串”，//类型可以是日期 “体”： “串”， “身份证” ：“string” }如何将图像添加到回送模型？

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

来源

2017-08-23 kingx26

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

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将帮助你一步一步的过程，以创建组件的存储和图像上载/回送下载功能。

来源

2017-08-23 10:23:35 ChamalPradeep

这是一个很好的答案，但现在我已经设置了如何实现角度？这部分仍然令人困惑。 – kingx26

谢谢@ kingx26，我会在下面的回答部分回答这个评论，因为它在代码部分稍微长一些。 :) – ChamalPradeep

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

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

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

来源

2017-08-23 07:31:17

您可以创建在身边“存储”文件夹，其下的“服务器”

文件夹结构创建的文件夹叫“userassests”：服务器>存储> 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)); 
      }); 
      }

执行该行代码图像资产将转移到服务器的安装位置，并在应用层面也保存在存储/ userassets文件夹后。

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

来源

2017-08-23 16:37:19 ChamalPradeep

再次感谢，我使用：“供应商”：“亚马逊”， “钥匙”：“我的钥匙”， “keyId”：“我的钥匙ID”，这将工作是否一样？ – kingx26

与获取附件模型的api，它检索我的aws桶，这是伟大的，但我仍然失去了这一点。对不起，如果我问得太多，我真的不知道这件事。 – kingx26

这就是我们如何学习kingx26的东西:) ......没有人知道所有事情......总是乐于用我的小知识贡献给你的解决方案...... !!!在AWS中，您可以附加S3存储桶作为存储。请记住为S3存储桶提供必要的编辑和查看权限。 – ChamalPradeep

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

回答

相关问题