### 使用 Formidable 实现图片上传 Formidable 是一个非常适合处理文件上传的 Node.js 包，能够简化文件上传过程中的复杂操作[^2]。结合 Express 框架，可以方便地实现图片上传功能。 #### 安装依赖库 为了使用 Formidable 和其他必要的模块，首先需要安装这些依赖： ```bash npm install express formidable multer --save ``` 尽管 `multer` 不是必需的，但在某些情况下可能用于对比不同中间件的效果。 #### 创建服务器端代码 下面是一个完整的例子来展示如何设置 Express 应用来接收并保存上传的图片文件: ```javascript const express = require('express'); const fs = require('fs'); const path = require('path'); const formidable = require('formidable'); // 初始化应用实例 let app = express(); app.use(express.static(path.join(__dirname, 'public'))); // 设置视图引擎（如果需要渲染HTML） app.set('views', __dirname); app.engine('.html', require('ejs').__express); app.set('view engine', 'html'); // GET请求返回表单页面 app.get('/', function(req, res){ res.render('index.html'); }); // POST请求处理上传逻辑 app.post('/upload', function(req, res){ let form = new formidable.IncomingForm(); form.uploadDir = "./uploads"; // 文件存储目录 form.parse(req, async (err, fields, files) => { if(err) return console.log(err); try{ const oldPath = files.file.path; const newPath = path.join(form.uploadDir, files.file.name); await fs.promises.rename(oldPath, newPath); res.writeHead(200, {"Content-Type": "text/html"}); res.end(`<h1>Upload successful!</h1><img src="${newPath}" />`); } catch(error){ console.error("Error during upload:", error.message); res.status(500).send("Server Error"); } }); }); // 启动服务监听端口 app.listen(3000, () => { console.log('Server started on http://localhost:3000/'); }); ``` 这段代码创建了一个简单的 Web 表单，允许用户选择要上传的图像文件，并将其保存到指定位置。当上传完成后，会向客户端发送确认消息以及新上传图片的位置链接[^1]。 #### 前端 HTML 表单 对于前端部分，则只需要提供一个标准的 `<form>` 元素即可，如下所示： ```html <!-- views/index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Image Upload</title> </head> <body> <h2>Select an image to upload:</h2> <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="file"><br><br> <button type="submit">Submit</button> </form> </body> </html> ``` 这个表单指定了目标 URL (`/upload`) 及编码方式 (`multipart/form-data`) 来确保能正确传递二进制数据给服务器侧脚本解析[^3]。