本文共 1478 字，大约阅读时间需要 4 分钟。

上传功能开发实录

1. 创建表单提交 upload.html 文件

我们需要为用户创建一个简单的图片上传表单，用户可以通过该表单上传个人头像。创建一个 upload.html 文件，内容如下：

        
用户头像上传
    
   
            上传头像：
            
        
   

2. 创建处理文件 upload.js

我们需要创建一个 upload.js 文件，作为服务器端的处理逻辑。以下是实现步骤：

1.1 引入必要的库

使用以下外部库来处理文件上传和路由：

const express = require('express');const bodyParser = require('body-parser');const formidable = require('formidable');const fs = require('fs');const path = require('path');

1.2 初始化服务器和中间件

const app = express();app.use(bodyParser.urlencoded({ extended: false }));

1.3 配置静态资源和路由

app.use(express.static(path.join(__dirname, 'upload')));// 定义路由app.get('/', (req, res) => {    res.sendFile(path.join(__dirname, 'upload.html'));});app.post('/upload', (req, res) => {    // 处理文件上传    const form = new formidable.IncomingForm();    form.parse(req, (err, fields, files) => {        // 读取上传的文件        const readStream = fs.createReadStream(files.userImg.path);                // 写入文件        const writeStream = fs.createWriteStream(            path.join(__dirname, 'upload', files.userImg.name)        );        readStream.pipe(writeStream);                // 处理上传完成后的回应        res.send(`图片已上传至 ${files.userImg.name}`);    });});

1.4 启动服务器

app.listen(3000, () => {    console.log('服务器运行中，访问地址为 http://localhost:3000');});

这样，用户可以通过浏览器访问 http://localhost:3000 进行头像上传。上传完成后，图片会被保存在 upload 目录下。

注意事项

这个实现方案简单明了，适合用于图片头像上传场景，同时兼容大部分主流的浏览器。

转载地址：http://yyokk.baihongyu.com/