项目 1：图片上传与分享系统

需求描述

我们要构建一个极简的系统：

1. 前端：用户选择本地图片，JS 将其转换为 Base64 字符串。
2. 传输：通过 JSON POST 请求发送给后端。
3. 后端：接收 Base64 字符串，解码并保存为服务器上的图片文件。

前端实现 (JavaScript)

const fileInput = document.getElementById('file');

fileInput.addEventListener('change', async (e) => {
    const file = e.target.files[0];
    
    // 1. 将文件转换为 Base64
    const reader = new FileReader();
    reader.readAsDataURL(file);
    
    reader.onload = async () => {
        const base64String = reader.result;
        
        // 2. 发送给后端
        await fetch('/api/upload', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ image: base64String })
        });
    };
});

后端实现 (Node.js/Express)

app.post('/api/upload', (req, res) => {
    const { image } = req.body;
    
    // image 格式如: "data:image/png;base64,iVBORw0..."
    
    // 1. 去掉前缀 (Data URI scheme)
    const base64Data = image.replace(/^data:image\/\w+;base64,/, "");
    
    // 2. 解码并保存
    const buffer = Buffer.from(base64Data, 'base64');
    fs.writeFileSync('uploads/uploaded_image.png', buffer);
    
    res.send('Upload success!');
});