我如何在我的 React-Node.js 專案中新增 CSV 導入

觸摸底座很好。這是一個很酷的項目。它起作用了。但是，讓我們面對現實吧——它有用嗎？ （Touch Base 是我製作的全端 React 聯絡人管理應用程式）。

我在思考這個問題並意識到一些顯而易見的事情。當用戶開始使用 Touch Base 時，他們必須手動新增聯絡人。如果您有 5 個聯絡人，這可能沒問題。如果您想要新增 1,000 個聯絡人，這很糟糕…而且您可能不想使用這個系統。當然，我知道我必須新增匯入聯絡人的功能。

研究選項

我的第一個 Google 搜尋是“csv importers”，或類似的東西。我瀏覽了一些可用的選項並找到了 FlatFile。他們的主要標題是「收集、載入和遷移資料的最快方式」。完美……只是，這並不適合我。現在，這可能是我的錯（他們看起來是一項令人驚嘆的服務），但是實施他們的進口商的過程比我願意為此付出的努力更多。這是添加一些側邊欄上下文的最佳時機：

最近，我真的很重視鬥志。我想要把事情做好，快點。這並不是為了偷工減料，我只是不想有任何藉口或不必要的延誤。畢竟，我只是一個從事業餘專案的人。所以我現在的態度是失敗、學習、快速迭代。一直在做好工作的同時。

傳回 FlatFile。儘管我很想使用他們有前途的軟體，但我問自己是否真的需要他們所有的附加功能，以及與他們的文件進行鬥爭是否值得。絕對不是。於是我又繼續搜索，最後找到了 Papa Parse。我記得在之前的搜索中看到過它。他們的主要標題是「適用於大男孩和女孩的強大的瀏覽器內 CSV 解析器」。 ？我在。

實作

首先，我為我的 API 新增了一條 POST 路由。

verifyToken 是我在所有路由中使用的函數，它的作用正是驗證使用者 ID 令牌。我在我的應用程式中使用 multer，它是一個用於處理檔案上傳的 Node.js 中間件。 upload.single('file') 是一個 multer 函數，可協助我將檔案上傳到我的 s3 儲存桶。

在路線內，我透過解構取得使用者 ID 和檔案。

就像 Papa Parse 狀態的 npm 套件文件一樣，「在 Node.js 環境中使用時，Papa Parse 可以解析可讀流而不是檔案（除了純字串之外）。」

因此，我準備好透過從我的 s3 儲存桶建立所述流以及用於保存結果資料的空數組，將檔案直接串流到 Papa Parse。不能忘記處理潛在的錯誤。

然後我最終將流傳遞給 Papa Parse，設定我的配置選項並處理結果中出現的任何錯誤。

在上面的程式碼中，complete 是一個帶有回呼函數的 Papa Parse 屬性。解析完成後就會執行。然後，我將結果提供的資料作為 parsedData 進行儲存。

之後，是時候對資料庫執行一些查詢並處理聯絡人了。但是，我需要儲存一個與資料庫的連接以首先執行查詢。

下一部分是 try catch 語句中的大量程式碼，因此我將直接提供給您並附上一些註解。

如你所見，我

• 取得現有聯絡人
• 使用電子郵件過濾掉重複的聯絡人，因為沒有兩封電子郵件可以相同
• 將不重複的聯絡人批次插入表中

前端

前端將在很大程度上特定於我的應用程式方法，但讓我們在這裡將這些點連接起來。

匯入聯絡人頁面只做一件事，因此非常簡單。我使用本機文件上傳按鈕，這實際上是一個輸入。

當輸入偵測到變更時，我會觸發handleFileUpload 函數。

在handleFileUpload函數內部，我先將載入狀態設為true，以便在此過程發生時向使用者顯示我的小載入旋轉器。

當使用者成功上傳他們的 .csv 檔案時，我將其附加到一個新的 formData 物件並將其發送到上面的後端路由來處理它。我在這裡直接使用獲取請求，因為它是我的應用程式中唯一會訪問 /import-contacts 端點的位置。如果我的應用程式的另一部分需要存取該路線，我將使用上下文儲存請求並使用它來避免重複程式碼。另外，您還可以看到我設定的錯誤處理...

成功處理檔案或出錯後，載入狀態將設定回 false，並且我會觸發適當的 toast 警報，讓使用者以良好的方式準確了解發生了什麼。

登入、上傳聯絡人的 .csv 檔案、成功的 Toast 警報，然後查看帳戶中填充的所有新聯絡人，感覺真好。而且速度這麼快。您可能會看到載入旋轉器一秒鐘。大量插入查詢也有很大幫助。

從可能可用到可用

在添加此功能之前，我想知道該應用程式到底有多有用。現在，這是毫無疑問的。儘管它不是超級複雜，但這是您希望在此類應用程式中看到的功能，因此我發現它是實現的要求。我認為這使得這個項目變得更加嚴肅。除此之外，我從未對 .csv 檔案做過任何事情，這使得工作變得非常有趣。 Papa Parse 與我已經使用的所有工具整合得很好，這使得它變得非常簡單。我絕對推薦使用它。

如果您已經做到了這一步，為您閱讀本文喝采？ ...
為不糟糕的軟體乾杯？

p.s 我仍然想知道我的專案是否很糟糕？
如果您想查看，請再次查看這裡的連結。

下次再見！

以上是我如何在我的 React-Node.js 專案中新增 CSV 導入的詳細內容。更多資訊請關注PHP中文網其他相關文章！