简介
it-multipart 是一个 Node.js 的模块，封装了 HTTP 请求上传 multipart/form-data 数据的方法，支持上传文件、文本和二进制数据等。它可以在前端的 JavaScript 中使用单独调用。在本篇文章中，我们将介绍如何使用 it-multipart，从而实现一个简单的图片上传应用。
安装
使用 npm 安装 it-multipart：
npm install it-multipart
使用示例
首先，我们需要创建一个 HTML 文件，其中包含一个用于上传文件的 input 元素：
-- -------------------- ---- ------- --------- ----- ------ ------ --------------------- ------- ------ --------------- ------ ------ ----------- --------------- ------------ ------- ------------- ---------------------------------- ------- ---- ------------------- ------- ------------------------- ------- -------展开代码
然后，我们需要编写前端 JavaScript 文件 upload.js。在其中引入 it-multipart 并定义上传函数：
-- -------------------- ---- ------- ----- ----------- - ------------------------ -------- ------------ - ----- --------- - -------------------------------------- ----- ---- - ------------------- ----- -------- - --- ----------- ----------------------- ------ ------------------------------------------- ----------------------- -- - -------------------------------------------- - -------------- -------------- -- - -------------------------------------------- - -------------- --- -展开代码
以上代码中，我们首先通过 document.getElementById 获取 input 元素，并获取用户所选择的文件。然后，我们创建一个 FormData 对象，将文件数据添加至其中。最后，我们通过 itMultipart() 方法并传入上传地址和 FormData 对象，实现上传功能。
接下来，我们需要使用 Node.js 后端服务器来接收上传的文件。在此处，我们使用 Express 框架，并使用 multer 中间件来处理文件上传：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------ - ------------------ ----- --- - ---------- ----- ------ - -------- ----- ----------- --- ------------------- ---------------------- ----- ---- -- - ------------------------------------------------ --- ---------------- -- -- ------------------- ------- -- ---- --------展开代码
这里，我们首先引用 Express 和 Multer，创建一个 Express 应用，并实例化 Multer，设置文件上传的目标路径。在路由中，我们调用 upload.single() 方法并传入前端 JavaScript 中填写的 name 属性来处理上传的文件。最后，我们返回上传成功信息及上传文件的原始名称。
完成以上步骤后，我们就可以使用 npm start 命令来启动服务器，并通过访问网址 http://localhost:3000 来使用我们搭建的文件上传应用了。
结论
使用 it-multipart 类库，我们可以快速轻松地实现前端的文件上传功能，同时也能够更好地理解和学习 HTTP 请求上传文件的过程。希望这篇文章对你有所启发，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcc50b5cbfe1ea0612742
