如何在 Node.js 中使用 FilePond
【.com快译】上传文件是使用云应用程序的常见需求。FilePond是使用一个可靠的开源项目，它为React和Svelte等许多 JavaScript 框架提供了复杂的使用文件处理和包装器。
本文详细地概述了使用 FilePond 、使用 Node.js 和 Express 后端处理文件上传。使用
为什么要使用FilePond？使用
有许多库可用于文件上传，但 FilePond 非常易于使用，使用并且无需额外配置即可处理图像优化等细节。使用此外，使用它在服务器端为开发人员提供了一个清晰的使用流程。
再加上对 Angular、使用jQuery、使用React、使用Vue 和 Svelte 的使用支持以及图像预览和缩放器等众多插件，FilePond在考虑文件上载时应该位于选项列表的使用顶部。
设置 FilePond 项目
首先设置一个项目来保存示例代码。创建一个目录并将其命名为 /filepond。然后转到命令行上的目录并键入npm init. 接受所有默认值。
下一步使用npm install Express安装Express服务器。接下来，创建一个 index.html 文件并将其放在项目根目录中。使用清单 1 的内容来更新新文件。
清单 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 中导入 FilePond 样式和代码。还可以通过 npm 和构建工具集成或直接导入它。高防服务器
标记仅包含一个文件输入。最后，底部的脚本获取对文件输入的引用，然后使用FilePond API使用输入元素FilePond.create（inputElement）创建一个新的FilePond实例。
现在将添加一个脚本来运行应用程序。修改 package.json 文件以包含清单 2 中的第 7 行。
清单 2. 添加开发（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。如果找不到，请使用npm install -g nodemon.
现在，可以在项目根目录下输入npm run dev来运行应用程序。
在应用程序运行时，可以通过打开浏览器访问http://localhost:43000/来访问简单的起始页。
将会看到一个简单的文件输入组件。尽管 FilePond 尚未绑定到后端，但可以继续从本地文件系统中选择一个文件，方法是单击“浏览”或将文件拖到 FilePond 组件上，FilePond 将按照顺序进行为其排队。
处理文件上传
与后端交互的第一步是告诉 FilePond 的位置在哪里。FilePond 可以处理任何 URL。在本例子中，我们将使用来自同一域的相对路径。亿华云计算如果使用指向另一个域的绝对 URL，那么CORS将发挥作用。
修改 index.html 中的脚本以包含清单 3 中所示的配置。
清单 3. 设置服务器 URL
<script> const inputElement = document.querySelector(input[type="file"]); const pond = FilePond.create( inputElement ); pond.setOptions({ server: "/upload" }) </script>清单 3 告诉 FilePond （通过 POST）将文件位发送到相对 URL /upload。让我们在服务器上准备一个简单的处理程序来验证端点是否被命中。将清单 4 中的代码添加到 index.js 文件中。
清单 4. 映射 /upload POST
app.post("/upload", function(req, res){ console.log("BEGIN /upload"); })然后返回浏览器并刷新页面。当上传文件时，可以通过查看服务器日志并查看“BEGIN /upload”输出来验证是否正在访问端点。
保存临时文件
上传文件时，服务器首先将文件临时写入某个位置。服务器用唯一 ID 响应以确认上传，当客户端提交包含文件输入的表单时，它将包含唯一 ID。然后，服务器使用唯一 ID 来定位临时文件并将该文件移动到其长期位置。
也可以采用多种不同的方法来支持服务器端的这些需求，同时使用文件系统和数据库。
本示例将使用Formidable库来处理 FilePond 发送的多部分 POST。Formidable 是一个成熟且功能强大的库，服务器租用它的灵活性足以编写自定义流处理程序。例如，如果想将文件保存到数据库中，可以自己处理文件块并将它们流式传输到数据存储。
在本演示中，只需将简单地将临时文件写入磁盘。首先安装 Formidable：停止服务器（如果正在运行）并键入npm install formidable. 现在您可以重新启动服务器。
转到 index.js 并通过在文件开头插入以下行来导入库：
const formidable = require(formidable);
然后使用清i单 5 更新ndex.js。
清单 5. 接受临时文件
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 界面上传文件，将在日志记录中看到该文件已写入默认的临时文件位置。例如，在我的本地系统上，即 C:\Users\mtyson\AppData\Local\Temp\。即可以打开文件并验证它是你发送的文件。
请注意，应用程序使用文件路径发送纯文本响应。这在现实场景中是不安全的，因为最终用户可以看到文件结构并收集有关系统的信息（就像我的文件路径显示它是 Windows 系统一样）。
对于生产用途，需要一个间接层，以便保存文件并创建一个与文件路径相关联的唯一 ID。出于安全的目的，我们将只使用文件路径。
完成文件上传
现在回到客户端。将上传器包装在一个表单中并提交，并考虑将文件保存在何处以供长期存储。由于表单仅发送文件的路径（或唯一 ID），因此可以将其作为带有 JSON 的 AJAX 请求轻松处理。保持文件传输的简单性，并在示例中使用表单提交，如清单 6 所示。
清单 6. uploader表单
<body> <form style="display:grid;" action="/save" method="POST"> <input type="file"> <button type="submit" onclick="">Save It</button> </form> </body>现在，当单击按钮时，将提交文件路径，默认标签为“filepond”（这是可配置的）。在这种情况下，我们通过 POST 将信息发送到 /save。
请注意，如果将文件输入设置为“多个支持”，FilePond 将处理排队的多个文件。
要处理提交，返回 index.js 并使用 Express urlencoded 中间件：
app.use(express.urlencoded({ extended: true }));现在就可以准备好接收文件信息。添加如清单 7 所示的处理程序。
清单 7. 接收保存
app.post("/save", function(req, res){ console.log("BEGIN /save"); console.log(`req: ${ JSON.stringify(req.body)}`); })清单 7 中的处理程序就位后，应该可以看到日志以确认信息已经到达。日志记录将如下所示：
req: { "filepond":"C:\\Users\\mtyson\\AppData\\Local\\Temp\\upload_28331577a229fe48443275b2655a1abe"}现在，可以从磁盘读取该文件并对其执行所需操作。使用 Node 的内置 fs 模块从磁盘读取它，如清单 8 所示。
清单 8. 从磁盘读取临时文件
const fs =要求( fs ); //...让fileData = fs . readFileSync ( req . body . filepond );清单 8 创建了文件的缓冲区对象。当然也可以使用Amazon上的ODFS或bucket将文件写入另一个系统（如Amazon上的一个模块）。
例如，在 MongoDB 中，可以按原样获取缓冲区并将其写入如下字段：
require(mongodb).Binary(fileData)这总结了上传和保存文件的完整周期。我们将看看图像预览器扩展。
将图像预览器添加到应用程序很简单，如清单 9 所示。
清单 9. 图像预览器插件
<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>当你上传一个图像文件时，你将看到一个预览，如图1所示。
图1.图像预览器
正如你所看到的，FilePond在一个易于使用的API中提供了一个现代的文件上传器组件。还有许多其他FilePond插件可用，包括一个完整的图像编辑器（通过与Pintura/Doka集成）。
【译稿，合作站点转载请注明原文译者和出处为.com】