前言
在现代 Web 应用中，图片上传是一个常见的需求。本文将介绍如何使用 FileAPI 和 Node.js 实现图片上传功能。
FileAPI 简介
FileAPI 是由 W3C 提出的一组 JavaScript 接口，用于访问本地文件系统、读取文件内容以及进行文件上传等操作。它提供了一种跨浏览器的方式来处理文件，可以在不依赖任何插件的情况下实现文件上传。
FileAPI 支持多种类型的文件，包括图片、视频、音频和文档等。对于图片上传，我们主要使用其中的 File 和 FileReader 接口。
客户端实现
在客户端，我们可以使用 HTML5 的 input[type=file] 元素来实现文件选择。用户在选择图片后，通过 FileReader 接口读取文件内容，并将其转换为 Base64 编码的字符串，最后发送给服务器进行存储。
以下是一个简单的示例：
--------- -----
------
------
----- ----------------
-------------------
-------
------
------
------ ----------- ---------------
------- ------------- -----------------------------------
-------
--------
-------- ------------- -
----- --------- - -------------------------------------
----- ---- - -------------------
----- ------ - --- -------------
---------------------------
------------- - ---------- -
----- ------- - --------------
-- -- ---- --------
----- --- - --- -----------------
---------------- -----------
------------------------------------ --------------------
------------------------- ------ ------- ----
--
-
---------
-------
-------在上述示例中，我们使用 FileReader 对象读取文件内容，并将其转换为 Base64 编码的字符串。然后，我们使用 Ajax 发送 POST 请求来上传图片。
服务器端实现
在服务器端，我们使用 Node.js 来处理上传图片的请求。首先，我们需要安装并引入 express 和 multer 模块。
--- ------- ------- ------
下面是一个简单的服务器端示例：
----- ------- - ------------------- ----- ------ - ------------------ ----- --- - ---------- ----- ------ - -------- ----- ---------- --- ------------------- ----------------------- ----- ---- -- - ----- ---- - --------- ------------------ -- -------- ---------- -------- ------ --- --- ---------------- -- -- - ---------------------- ---
在上述示例中，我们使用 multer 模块来处理文件上传。通过调用 upload.single('image') 方法，我们指定了上传文件的名称为 image，并将上传的文件存储在 uploads/ 目录下。在上传成功后，我们会在控制台输出上传文件的信息，并返回一个 JSON 格式的成功信息。
总结
本文介绍了如何使用 FileAPI 和 Node.js 实现图片上传功能。通过使用 FileAPI，我们可以在客户端将图片转换为 Base64 编码的字符串，并使用 Ajax 发送 POST 请求来上传图片。在服务器端，我们使用 multer 模块来处理文件上传，并将上传成功后的文件信息存储在指定的目录下。
完整示例代码请参考：https://github.com/chatgpt/article-examples/tree/main/file-upload。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/816