如何構建 JavaScript 文件上傳器？

文件上傳是當今大多數網絡項目的基本功能。 例如，Facebook、LinkedIn、Twitter、Coursera 等現代網站和 Web 應用程序允許最終用戶上傳圖像、文檔、視頻等文件。此外，圖像編輯工具、剽竊檢查器等在線工具， PDF 到 Word 轉換器還允許用戶上傳文件。 有時，內部團隊需要文件上傳功能來上傳產品視頻和圖片。 雖然創建文件上傳器可能具有挑戰性，但如今，可以使用多種第三方工具和庫來幫助在您的項目中快速實現文件上傳功能。 但是，如果您希望從頭開始創建一個文件上傳器，更具體地說，一個 JavaScript 上傳器，那麼這篇文章就是您的最佳選擇。

在本文中，我們將向您展示如何在不使用任何外部庫的情況下使用普通 JavaScript 或純 JavaScript 創建 JavaScript 文件上傳器。

文件上傳器有哪些功能？

在構建文件上傳器時，我們需要創建一個前端文件上傳按鈕，使用戶能夠將他們想要的文件上傳到網站或網絡應用程序。 我們還可以允許多個文件上傳並顯示進度條，以獲得更好的用戶體驗。 此外，我們還應該在用戶上傳圖像文件時顯示圖像預覽。 文件上傳後，我們需要讀取它，將其發送到後端，並存儲在服務器上。 有時，用戶上傳大文件，導致上傳速度變慢。 因此，最好將大文件分塊上傳到服務器，以防止出錯並提高速度。 這些文件塊比單個大文件更易於管理。

此外，開發人員必須創建一個支持快速上傳的高效文件上傳器。 您還需要確保文件上傳器是安全的，以防止網絡攻擊者將惡意軟件和病毒部署到您的服務器中。

如何創建 JavaScript 文件上傳器？

第 1 步：設置服務器端

我們將使用內置的 HTTP 包來設置 Node.js 服務器。 我們將從為項目創建一個新文件夾開始：

mkdir 文件上傳服務

接下來，我們將創建一個 index.js 文件。 這將是我們服務器的入口點。

最後，我們將創建將在端口 8080 上運行的 HTTP 服務器

第 2 步：創建 JavaScript 文件上傳器的前端

為了創建我們的 JavaScript 文件上傳器的前端，我們將創建一個基本的 HTML 文件，它將顯示一個文件上傳按鈕並接受用戶的文件輸入。 我們還將顯示文件上傳的狀態。 一旦用戶單擊該按鈕，文件上傳過程將啟動。

當我們創建一個簡單的文件上傳按鈕時，您還可以出於設計目的編輯按鈕的文本或更改按鈕的顏色。

接下來，我們將從後端發送這個文件：

第三步：在前端讀取上傳的文件

要在前端讀取文件內容，我們將使用“FileReader”對象。 它使 Web 應用程序能夠異步讀取文件內容（存儲在用戶系統上）。 “FileReader”對象提供了多種讀取文件的方法。 例如，我們可以將上傳的文件作為數組緩衝區或原始二進制數據讀取。 我們甚至可以將文件作為數據 URL 讀取。 在這裡，我們將使用數組方法來讀取文件：

可以在輸入的“文件”字段下訪問所選文件：

'FileReader' 對像還提供了幾個事件偵聽器，例如'onprogress' 和 'onload'，以跟踪前端對上傳文件的讀取。 在這裡，我們將使用“onload”事件：

第四步：將上傳的文件發送到後台

在我們將用戶上傳的文件發送到後端之前，最好將其分成小塊或小塊並定期發送文件塊，尤其是在文件大小較大的情況下。 這是因為上傳非常大的文件會導致與延遲和速度相關的問題。 此外，有時網絡攻擊者還會上傳過大的文件，這可能會導致服務器出現故障。

所以，我們先把文件切塊，一個一個的發給後台。 我們還需要確保按順序發送塊，以免文件損壞。 我們還將使用“async await”，這樣我們就不會因請求而使服務器過載。

第 5 步：將文件塊存儲在服務器上

最後，我們將接收塊並將它們存儲在服務器上。

就是這樣。 我們現在有一個完整的用於 Javascript 文件上傳的單文件上傳器。 我們還可以使用“多個”選項啟用多個文件上傳：

<input type=”file” id=”files” 多個>

我們會將每個文件一個一個地分解成塊，然後將它們發送到後端。

結論

文件上傳是許多現代網絡應用程序和網站的基本功能。 我們可以使用第三方文件上傳工具，例如 JavaScript 庫或文件上傳 API，來快速實現 JavaScript 文件上傳到我們的應用程序中。 但是，您也可以按照自己的方式從頭開始創建文件上傳器。 例如，您可以將大文件拆分成塊，然後將它們一個一個地發送到後端。 在本文中，我們從頭開始使用 Vanilla JS 創建了一個 JavaScript 文件上傳器。