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

上传功能开发实录

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/