React项目中Base64图片写入文件系统失败问题求助

核心问题分析 #

你的代码存在三个关键问题导致文件无法保存：

• 路径与文件名错误：未使用正确的相对路径指向目标文件夹，且fs.writeFile不能直接写入文件夹，必须指定具体文件名
• 异步时序问题：未等待文件写入完成就返回响应，可能导致写入中断
• Serverless环境限制：多数Serverless平台的本地文件系统是临时/只读的，无法持久化存储文件

修复步骤与代码示例 #

1. 修正路径与文件名

你的Serverless函数位于/root/api/myServerlessFunction.js，目标文件夹是/root/public/assets/profilePictures/，需要使用相对路径../public/assets/profilePictures/，同时生成唯一文件名避免重名覆盖。

2. 处理异步写入逻辑

使用fs.promises.writeFile配合await确保文件写入完成后再返回响应，同时捕获错误便于排查。

3. 适配Serverless环境（重要）

注意：大多数Serverless平台（如Vercel、Netlify）的本地文件系统是临时的，函数执行结束后文件会被清理。如果需要持久化存储图片，建议使用云存储服务（如AWS S3、Cloudinary等）替代本地文件夹。

修改后的代码：

const fs = require('fs').promises;
const path = require('path');

module.exports = async (req, res) => {
    try {
        const base64Image = req.body.imageString;
        const finalImageString = base64Image.split(';base64,').pop();
        
        // 构建绝对路径，避免跨平台路径问题
        const targetDir = path.join(__dirname, '../public/assets/profilePictures');
        // 确保目标目录存在，不存在则递归创建
        await fs.mkdir(targetDir, { recursive: true });
        
        // 生成唯一文件名（用时间戳避免重名）
        const fileName = `avatar-${Date.now()}.png`;
        const targetPath = path.join(targetDir, fileName);
        
        // 写入Base64图片内容
        await fs.writeFile(targetPath, finalImageString, { encoding: 'base64' });
        
        console.log(`文件已成功写入：${targetPath}`);
        res.status(200).json({ 
            message: '图片保存成功',
            accessUrl: `/assets/profilePictures/${fileName}`
        });
    } catch (err) {
        console.error('写入文件失败：', err);
        res.status(500).json({ error: '图片保存失败' });
    }
};

额外注意事项 #

• 若使用Vercel等Serverless平台，public文件夹的内容会被静态托管，但函数写入的文件不会被自动同步到静态资源中，后续可能无法通过前端访问。
• 生产环境中建议对上传的图片进行格式校验、大小限制，避免恶意文件上传。

内容的提问来源于stack exchange，提问作者Jon Nicholson