如何在Node中上傳圖像.js簡單的方法?為了獲得更好的用戶體驗，請了解如何使用節點.js和MongoDB將圖像上傳到云中。
大綱
? 設置用于圖像上傳的 Multer。
? 將圖像上傳到云。
? 將圖像與蒙哥數據庫鏈接。
最近，我決定構建自己的REST API，以改善我的水果店網站的功能。
通過付出很多努力，我能夠為網站構建自己的REST API。在本地，一切都很完美，包括圖形和產品數據。但是，當我將API放在Heroku上時，事情開始破裂。
正如您在上面的圖像中看到的，當我從服務器獲取數據時，它返回了所有產品及其圖像鏈接。
但是，當我單擊圖像鏈接時，我收到錯誤而不是圖像。
從錯誤消息中可以看出，它表示該路由當前不可用。顯然，這不是我想要的，所以我試圖自己修復它。
最后，經過大量研究，我想出了一個解決方案，我相信它也對你有用。
這就是您將在本文中學到的有關將圖像上傳到云并使用Node.js和MongoDB將它們鏈接到數據庫的內容。
讓我們潛入
作為了解實際工作的一種方式，您的任務是創建一個包含用戶姓名、電子郵件和圖片的用戶配置文件。
先決條件
雷霆客戶端或郵遞員用于API測試。
代碼編輯器。
如果您能夠理解初學者文件中的代碼，那么您就很高興了。
讓我們看看如何做到這一點
獲取初學者文件。
打開終端并安裝所有必需的軟件包。
注意 — 該項目遵循 REST API 體系結構。
為了開始使用，您只需要創建一個環境文件并添加兩個變量，MONGO_URI和端口。
將 MongoDB 連接字符串粘貼到MONGO_URI中。
讓我們運行服務器。
理想情況下，您應該得到像上圖一樣的結果。
現在，讓我們查看路由文件夾中的一些路由并對其進行測試。
現在，讓我們創建用戶配置文件。
第一步是將多部分數據導入到主文件中。
首先為用戶配置文件映像創建存儲。
法典
代碼說明
分配應首先存儲用戶圖像的文件夾。
您可以通過將當前日期與隨機生成的數字(最多為10億)與原始文件擴展名連接來輕松創建唯一的文件名，如下所示：
“文件名”： “1663478472266–946908179.jpg”
為多部分數據創建處理程序
創建函數句柄多部分數據
在其上使用多路方法。
Multer接受幾個選項，但在您的情況下，您需要傳遞之前創建的存儲配置和文件限制。
并提供單個(“圖像”)
在主路由文件中使用句柄多.js數據
完整代碼
是時候測試您的設置了。
在 Thunder 客戶端中，打開創建用戶路由，然后輸入用戶名和帶有配置文件的電子郵件。
此外，您將在上傳文件夾中找到任何文件。
讓我們發送請求，并希望一切正常。
服務器使用用戶和文件數據進行響應。
您還可以注意到上載文件夾不再為空。
一切都很好。
現在，您可以將用戶圖像上傳到服務器。
將圖像上傳到云
讓我們繼續第二步，您將圖像上傳到云中。
對于此類項目，我建議使用Cloudinary，這是一種免費的基于云的服務，運行良好。
以下是您需要遵循的步驟
創建云帳戶。
創建帳戶后，現在可以配置 Web 應用程序了。
單擊配置您的 SDK。
選擇“節點.js”選項。
復制密鑰。
轉到主.js文件中的創建用戶路由。
我強烈建議您將這些關鍵值存儲在環境文件中。
好吧，讓我們編寫一些代碼，然后我們將啟動。
法典
代碼說明
如果文件路徑未定義，則代碼僅返回。
提供文件路徑到云中.v2.uploader.upload 方法。
讓我們看看您的文件是否已成功上傳到云。
這很好，我們得到了結果。
在上圖中，您可以看到上傳的文件鏈接以及用戶數據。
現在單擊圖像鏈接以打開圖像。
這很好，圖像已成功上傳到云中。
完整代碼
將圖像與數據庫鏈接
在模型的文件夾中打開 user.js，然后簽出用戶架構。
如您所見，用戶架構已經創建。歡迎您根據自己的要求進行定制。
創建用戶文檔
去創建一個新的數據庫。
在主.js文件中導入用戶.js文件。
代碼說明
第 57 行 — 從 req. body 解構了名稱和電子郵件。
第 61 行 — 等待并使用用戶.create() 方法創建用戶。
第 62 行 & 63 — 將名稱和電子郵件對象傳遞到創建方法中。
第 64 行 — 對于映像選項，分配云映像的安全 URL。
現在是將用戶數據上傳到數據庫中的時候了。
在上面，您可以看到您的云映像和數據庫已成功鏈接。
您可以通過單擊圖像鏈接進行驗證，它已準備好訪問。
您還可以檢查數據庫。
結論
借助這項新功能，您可以毫不費力地將圖像從計算機上傳到云中，從而使 Node.js 應用程序比以往更快、更高效地運行。
京公網安備 11010802030320號