如何在 Node.js 中使用 FilePond
譯文【51CTO.com快譯】上傳文件是云應(yīng)用程序的常見需求。FilePond是一個(gè)可靠的開源項(xiàng)目，它為React和Svelte等許多 JavaScript 框架提供了復(fù)雜的文件處理和包裝器。
本文詳細(xì)地概述了使用 FilePond 、 Node.js 和 Express 后端處理文件上傳。
為什么要使用FilePond？
有許多庫可用于文件上傳，但 FilePond 非常易于使用，并且無需額外配置即可處理圖像優(yōu)化等細(xì)節(jié)。此外，它在服務(wù)器端為開發(fā)人員提供了一個(gè)清晰的流程。
再加上對(duì) Angular、jQuery、React、Vue 和 Svelte 的支持以及圖像預(yù)覽和縮放器等眾多插件，F(xiàn)ilePond在考慮文件上載時(shí)應(yīng)該位于選項(xiàng)列表的頂部。
設(shè)置 FilePond 項(xiàng)目
首先設(shè)置一個(gè)項(xiàng)目來保存示例代碼。創(chuàng)建一個(gè)目錄并將其命名為 /filepond。然后轉(zhuǎn)到命令行上的目錄并鍵入npm init. 接受所有默認(rèn)值。
下一步使用npm install Express安裝Express服務(wù)器。接下來，創(chuàng)建一個(gè) index.html 文件并將其放在項(xiàng)目根目錄中。使用清單 1 的內(nèi)容來更新新文件。
清單 1. 開始 index.html
- <html>
- <head>
- <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet" />
- <script src="https://unpkg.com/filepond/dist/filepond.js"></script>
- </head>
- <body>
- <input type="file">
- </body>
- <script>
- const inputElement = document.querySelector('input[type="file"]');
- const pond = FilePond.create( inputElement );
- </script>
- </html>
清單 1 首先從 unpkg CDN 中導(dǎo)入 FilePond 樣式和代碼。還可以通過 npm 和構(gòu)建工具集成或直接導(dǎo)入它。
標(biāo)記僅包含一個(gè)文件輸入。最后，底部的腳本獲取對(duì)文件輸入的引用，然后使用FilePond API使用輸入元素FilePond.create（inputElement）創(chuàng)建一個(gè)新的FilePond實(shí)例。
現(xiàn)在將添加一個(gè)腳本來運(yùn)行應(yīng)用程序。修改 package.json 文件以包含清單 2 中的第 7 行。
清單 2. 添加開發(fā)（dev）腳本
- {
- "name": "filepond",
- "version": "1.0.0",
- "description": "",
- "main": "index.js",
- "scripts": {
- "dev": "nodemon server.js",
- "test": "echo \"Error: no test specified\" && exit 1"
- },
- "author": "",
- "license": "ISC",
- "dependencies": {
- "express": "^4.17.1"
- }
- }
通過在CLI中鍵入nodemon-v，確保全局安裝了nodemon。如果找不到，請(qǐng)使用npm install -g nodemon.
現(xiàn)在，可以在項(xiàng)目根目錄下輸入npm run dev來運(yùn)行應(yīng)用程序。
在應(yīng)用程序運(yùn)行時(shí)，可以通過打開瀏覽器訪問http://localhost:43000/來訪問簡(jiǎn)單的起始頁。
將會(huì)看到一個(gè)簡(jiǎn)單的文件輸入組件。盡管 FilePond 尚未綁定到后端，但可以繼續(xù)從本地文件系統(tǒng)中選擇一個(gè)文件，方法是單擊“瀏覽”或?qū)⑽募系?FilePond 組件上，F(xiàn)ilePond 將按照順序進(jìn)行為其排隊(duì)。
處理文件上傳
與后端交互的第一步是告訴 FilePond 的位置在哪里。FilePond 可以處理任何 URL。在本例子中，我們將使用來自同一域的相對(duì)路徑。如果使用指向另一個(gè)域的絕對(duì) URL，那么CORS將發(fā)揮作用。
修改 index.html 中的腳本以包含清單 3 中所示的配置。
清單 3. 設(shè)置服務(wù)器 URL
- <script>
- const inputElement = document.querySelector('input[type="file"]');
- const pond = FilePond.create( inputElement );
- pond.setOptions({
- server: "/upload"
- })
- </script>
清單 3 告訴 FilePond （通過 POST）將文件位發(fā)送到相對(duì) URL /upload。讓我們?cè)诜?wù)器上準(zhǔn)備一個(gè)簡(jiǎn)單的處理程序來驗(yàn)證端點(diǎn)是否被命中。將清單 4 中的代碼添加到 index.js 文件中。
清單 4. 映射 /upload POST
- app.post("/upload", function(req, res){
- console.log("BEGIN /upload");
- })
然后返回瀏覽器并刷新頁面。當(dāng)上傳文件時(shí)，可以通過查看服務(wù)器日志并查看“BEGIN /upload”輸出來驗(yàn)證是否正在訪問端點(diǎn)。
保存臨時(shí)文件
上傳文件時(shí)，服務(wù)器首先將文件臨時(shí)寫入某個(gè)位置。服務(wù)器用唯一 ID 響應(yīng)以確認(rèn)上傳，當(dāng)客戶端提交包含文件輸入的表單時(shí)，它將包含唯一 ID。然后，服務(wù)器使用唯一 ID 來定位臨時(shí)文件并將該文件移動(dòng)到其長期位置。
也可以采用多種不同的方法來支持服務(wù)器端的這些需求，同時(shí)使用文件系統(tǒng)和數(shù)據(jù)庫。
本示例將使用Formidable庫來處理 FilePond 發(fā)送的多部分 POST。Formidable 是一個(gè)成熟且功能強(qiáng)大的庫，它的靈活性足以編寫自定義流處理程序。例如，如果想將文件保存到數(shù)據(jù)庫中，可以自己處理文件塊并將它們流式傳輸?shù)綌?shù)據(jù)存儲(chǔ)。
在本演示中，只需將簡(jiǎn)單地將臨時(shí)文件寫入磁盤。首先安裝 Formidable：停止服務(wù)器（如果正在運(yùn)行）并鍵入npm install formidable. 現(xiàn)在您可以重新啟動(dòng)服務(wù)器。
轉(zhuǎn)到 index.js 并通過在文件開頭插入以下行來導(dǎo)入庫：
const formidable = require('formidable');
然后使用清i單 5 更新ndex.js。
清單 5. 接受臨時(shí)文件
- app.post("/upload", function(req, res){
- console.log("BEGIN /upload");
- const form = formidable({ multiples: false });
- form.parse(req, (err, fields, files) => {
- if (err) {
- next(err);
- return;
- }
- let theFile = files.filepond.path;
- console.log("theFile: " + theFile);
- res.writeHead(200, { 'Content-Type': 'text/plain' });
- res.end(theFile);
- });
- })
使用 Formidable接受文件是輕而易舉的。如果通過 Web 界面上傳文件，將在日志記錄中看到該文件已寫入默認(rèn)的臨時(shí)文件位置。例如，在我的本地系統(tǒng)上，即 C:\Users\mtyson\AppData\Local\Temp\。即可以打開文件并驗(yàn)證它是你發(fā)送的文件。
請(qǐng)注意，應(yīng)用程序使用文件路徑發(fā)送純文本響應(yīng)。這在現(xiàn)實(shí)場(chǎng)景中是不安全的，因?yàn)樽罱K用戶可以看到文件結(jié)構(gòu)并收集有關(guān)系統(tǒng)的信息（就像我的文件路徑顯示它是 Windows 系統(tǒng)一樣）。
對(duì)于生產(chǎn)用途，需要一個(gè)間接層，以便保存文件并創(chuàng)建一個(gè)與文件路徑相關(guān)聯(lián)的唯一 ID。出于安全的目的，我們將只使用文件路徑。
完成文件上傳
現(xiàn)在回到客戶端。將上傳器包裝在一個(gè)表單中并提交，并考慮將文件保存在何處以供長期存儲(chǔ)。由于表單僅發(fā)送文件的路徑（或唯一 ID），因此可以將其作為帶有 JSON 的 AJAX 請(qǐng)求輕松處理。保持文件傳輸?shù)暮?jiǎn)單性，并在示例中使用表單提交，如清單 6 所示。
清單 6. uploader表單
- <body>
- <form style="display:grid;" action="/save" method="POST">
- <input type="file">
- <button type="submit" onclick="">Save It</button>
- </form>
- </body>
現(xiàn)在，當(dāng)單擊按鈕時(shí)，將提交文件路徑，默認(rèn)標(biāo)簽為“filepond”（這是可配置的）。在這種情況下，我們通過 POST 將信息發(fā)送到 /save。
請(qǐng)注意，如果將文件輸入設(shè)置為“多個(gè)支持”，F(xiàn)ilePond 將處理排隊(duì)的多個(gè)文件。
要處理提交，返回 index.js 并使用 Express urlencoded 中間件：
- app.use(express.urlencoded({ extended: true }));
現(xiàn)在就可以準(zhǔn)備好接收文件信息。添加如清單 7 所示的處理程序。
清單 7. 接收保存
- app.post("/save", function(req, res){
- console.log("BEGIN /save");
- console.log(`req: ${JSON.stringify(req.body)}`);
- })
清單 7 中的處理程序就位后，應(yīng)該可以看到日志以確認(rèn)信息已經(jīng)到達(dá)。日志記錄將如下所示：
- req: {"filepond":"C:\\Users\\mtyson\\AppData\\Local\\Temp\\upload_28331577a229fe48443275b2655a1abe"}
現(xiàn)在，可以從磁盤讀取該文件并對(duì)其執(zhí)行所需操作。使用 Node 的內(nèi)置 fs 模塊從磁盤讀取它，如清單 8 所示。
清單 8. 從磁盤讀取臨時(shí)文件
- const fs =要求( 'fs' ); //...讓fileData = fs . readFileSync ( req . body . filepond );
清單 8 創(chuàng)建了文件的緩沖區(qū)對(duì)象。當(dāng)然也可以使用Amazon上的ODFS或bucket將文件寫入另一個(gè)系統(tǒng)（如Amazon上的一個(gè)模塊）。
例如，在 MongoDB 中，可以按原樣獲取緩沖區(qū)并將其寫入如下字段：
- require('mongodb').Binary(fileData)
這總結(jié)了上傳和保存文件的完整周期。我們將看看圖像預(yù)覽器擴(kuò)展。
將圖像預(yù)覽器添加到應(yīng)用程序很簡(jiǎn)單，如清單 9 所示。
清單 9. 圖像預(yù)覽器插件
- <head>
- ...
- <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
- <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
- </head>
- <body>
- ...
- FilePond.registerPlugin(FilePondPluginImagePreview);
- ...
- </body>
當(dāng)你上傳一個(gè)圖像文件時(shí)，你將看到一個(gè)預(yù)覽，如圖1所示。
圖1.圖像預(yù)覽器
正如你所看到的，F(xiàn)ilePond在一個(gè)易于使用的API中提供了一個(gè)現(xiàn)代的文件上傳器組件。還有許多其他FilePond插件可用，包括一個(gè)完整的圖像編輯器（通過與Pintura/Doka集成）。
【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】
