如何將圖像添加到回送模型？

我創建了一個使用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

如何將圖像添加到回送模型？

回答

相關問題