如何在Node中上傳圖像.js簡單的方法

　　如何在Node中上傳圖像.js簡單的方法?為了獲得更好的用戶體驗，請了解如何使用節(jié)點.js和MongoDB將圖像上傳到云中。

　　大綱

　　? 設(shè)置用于圖像上傳的 Multer。

　　? 將圖像上傳到云。

　　? 將圖像與蒙哥數(shù)據(jù)庫鏈接。

　　最近，我決定構(gòu)建自己的REST API，以改善我的水果店網(wǎng)站的功能。

　　通過付出很多努力，我能夠為網(wǎng)站構(gòu)建自己的REST API。在本地，一切都很完美，包括圖形和產(chǎn)品數(shù)據(jù)。但是，當(dāng)我將API放在Heroku上時，事情開始破裂。

　　正如您在上面的圖像中看到的，當(dāng)我從服務(wù)器獲取數(shù)據(jù)時，它返回了所有產(chǎn)品及其圖像鏈接。

　　但是，當(dāng)我單擊圖像鏈接時，我收到錯誤而不是圖像。

　　從錯誤消息中可以看出，它表示該路由當(dāng)前不可用。顯然，這不是我想要的，所以我試圖自己修復(fù)它。

　　最后，經(jīng)過大量研究，我想出了一個解決方案，我相信它也對你有用。

　　這就是您將在本文中學(xué)到的有關(guān)將圖像上傳到云并使用Node.js和MongoDB將它們鏈接到數(shù)據(jù)庫的內(nèi)容。

　　讓我們潛入

　　作為了解實際工作的一種方式，您的任務(wù)是創(chuàng)建一個包含用戶姓名、電子郵件和圖片的用戶配置文件。

　　先決條件

　　雷霆客戶端或郵遞員用于API測試。

　　代碼編輯器。

　　如果您能夠理解初學(xué)者文件中的代碼，那么您就很高興了。

　　讓我們看看如何做到這一點

　　獲取初學(xué)者文件。

　　打開終端并安裝所有必需的軟件包。

　　注意 — 該項目遵循 REST API 體系結(jié)構(gòu)。

　　為了開始使用，您只需要創(chuàng)建一個環(huán)境文件并添加兩個變量，MONGO_URI和端口。

　　將 MongoDB 連接字符串粘貼到MONGO_URI中。

　　讓我們運行服務(wù)器。

　　理想情況下，您應(yīng)該得到像上圖一樣的結(jié)果。

　　現(xiàn)在，讓我們查看路由文件夾中的一些路由并對其進(jìn)行測試。

　　現(xiàn)在，讓我們創(chuàng)建用戶配置文件。

　　第一步是將多部分?jǐn)?shù)據(jù)導(dǎo)入到主文件中。

　　首先為用戶配置文件映像創(chuàng)建存儲。

　　法典

　　代碼說明

　　分配應(yīng)首先存儲用戶圖像的文件夾。

　　您可以通過將當(dāng)前日期與隨機生成的數(shù)字(最多為10億)與原始文件擴展名連接來輕松創(chuàng)建唯一的文件名，如下所示：

　　“文件名”： “1663478472266–946908179.jpg”

　　為多部分?jǐn)?shù)據(jù)創(chuàng)建處理程序

　　創(chuàng)建函數(shù)句柄多部分?jǐn)?shù)據(jù)

　　在其上使用多路方法。

　　Multer接受幾個選項，但在您的情況下，您需要傳遞之前創(chuàng)建的存儲配置和文件限制。

　　并提供單個(“圖像”)

　　在主路由文件中使用句柄多.js數(shù)據(jù)

　　完整代碼

　　是時候測試您的設(shè)置了。

　　在 Thunder 客戶端中，打開創(chuàng)建用戶路由，然后輸入用戶名和帶有配置文件的電子郵件。

　　此外，您將在上傳文件夾中找到任何文件。

　　讓我們發(fā)送請求，并希望一切正常。

　　服務(wù)器使用用戶和文件數(shù)據(jù)進(jìn)行響應(yīng)。

　　您還可以注意到上載文件夾不再為空。

　　一切都很好。

　　現(xiàn)在，您可以將用戶圖像上傳到服務(wù)器。

　　將圖像上傳到云

　　讓我們繼續(xù)第二步，您將圖像上傳到云中。

　　對于此類項目，我建議使用Cloudinary，這是一種免費的基于云的服務(wù)，運行良好。

　　以下是您需要遵循的步驟

　　創(chuàng)建云帳戶。

　　創(chuàng)建帳戶后，現(xiàn)在可以配置 Web 應(yīng)用程序了。

　　單擊配置您的 SDK。

　　選擇“節(jié)點.js”選項。

　　復(fù)制密鑰。

　　轉(zhuǎn)到主.js文件中的創(chuàng)建用戶路由。

　　我強烈建議您將這些關(guān)鍵值存儲在環(huán)境文件中。

　　好吧，讓我們編寫一些代碼，然后我們將啟動。

　　法典

　　代碼說明

　　如果文件路徑未定義，則代碼僅返回。

　　提供文件路徑到云中.v2.uploader.upload 方法。

　　讓我們看看您的文件是否已成功上傳到云。

　　這很好，我們得到了結(jié)果。

　　在上圖中，您可以看到上傳的文件鏈接以及用戶數(shù)據(jù)。

　　現(xiàn)在單擊圖像鏈接以打開圖像。

　　這很好，圖像已成功上傳到云中。

　　完整代碼

　　將圖像與數(shù)據(jù)庫鏈接

　　在模型的文件夾中打開 user.js，然后簽出用戶架構(gòu)。

　　如您所見，用戶架構(gòu)已經(jīng)創(chuàng)建。歡迎您根據(jù)自己的要求進(jìn)行定制。

　　創(chuàng)建用戶文檔

　　去創(chuàng)建一個新的數(shù)據(jù)庫。

　　在主.js文件中導(dǎo)入用戶.js文件。

　　代碼說明

　　第 57 行 — 從 req. body 解構(gòu)了名稱和電子郵件。

　　第 61 行 — 等待并使用用戶.create() 方法創(chuàng)建用戶。

　　第 62 行 & 63 — 將名稱和電子郵件對象傳遞到創(chuàng)建方法中。

　　第 64 行 — 對于映像選項，分配云映像的安全 URL。

　　現(xiàn)在是將用戶數(shù)據(jù)上傳到數(shù)據(jù)庫中的時候了。

　　在上面，您可以看到您的云映像和數(shù)據(jù)庫已成功鏈接。

　　您可以通過單擊圖像鏈接進(jìn)行驗證，它已準(zhǔn)備好訪問。

　　您還可以檢查數(shù)據(jù)庫。

　　結(jié)論

　　借助這項新功能，您可以毫不費力地將圖像從計算機上傳到云中，從而使 Node.js 應(yīng)用程序比以往更快、更高效地運行。