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

　　大綱

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

　　? 將圖像上傳到云。

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

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

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

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

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

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

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

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

　　讓我們潛入

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

　　先決條件

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

　　代碼編輯器。

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

　　讓我們看看如何做到這一點(diǎn)

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

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

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

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

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

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

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

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

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

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

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

　　法典

　　代碼說明

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

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

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

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

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

　　在其上使用多路方法。

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

　　并提供單個(gè)(“圖像”)

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

　　完整代碼

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

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

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

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

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

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

　　一切都很好。

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

　　將圖像上傳到云

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

　　對(duì)于此類項(xiàng)目，我建議使用Cloudinary，這是一種免費(fèi)的基于云的服務(wù)，運(yùn)行良好。

　　以下是您需要遵循的步驟

　　創(chuàng)建云帳戶。

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

　　單擊配置您的 SDK。

　　選擇“節(jié)點(diǎn).js”選項(xiàng)。

　　復(fù)制密鑰。

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

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

　　好吧，讓我們編寫一些代碼，然后我們將啟動(dòng)。

　　法典

　　代碼說明

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

　　提供文件路徑到云中.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)建一個(gè)新的數(shù)據(jù)庫。

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

　　代碼說明

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

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

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

　　第 64 行 — 對(duì)于映像選項(xiàng)，分配云映像的安全 URL。

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

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

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

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

　　結(jié)論

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