React项目文件上传异常：仅JSON文件无法上传，请求排查

1. 路径转义错误 #

Windows系统下字符串中的\属于转义字符，你直接用"cache\\" + filename拼接路径容易出现解析错误——比如文件名包含特定字符时，会被误解析为转义序列，导致实际读取的路径和预期不符，这很可能是.json文件上传失败的核心原因。

更稳妥的方式是用Node.js内置的path模块拼接路径，它会自动处理不同系统的路径分隔符，避免手动拼接的问题。

2. 缺失异步控制与错误处理 #

当前代码里，pipe上传操作是异步的，但你直接同步返回了uploadStream.id，完全没等待上传完成；同时没有任何错误捕获逻辑——如果.json文件读取或上传时出错，后端不会返回错误信息，前端还会误以为上传成功，直接掩盖了真实问题。

修复后的后端代码 #

const path = require('path'); // 先引入path模块

const addFile = async (req, res) => {
  try {
    const { filename } = req.body;
    // 用path.join自动处理路径分隔符，兼容Windows和Linux
    const filePath = path.join('cache', filename);

    const uploadStream = bucket.openUploadStream(filename);
    // 监听上传完成和错误事件，确保流程异步可控
    fs.createReadStream(filePath)
      .pipe(uploadStream)
      .on('finish', () => {
        res.status(200).json({ id: uploadStream.id });
      })
      .on('error', (err) => {
        console.error('上传失败:', err);
        res.status(500).json({ error: '文件上传失败', details: err.message });
      });
  } catch (err) {
    console.error('请求处理失败:', err);
    res.status(400).json({ error: '请求参数错误', details: err.message });
  }
};

前端补充错误捕获 #

给前端请求加上错误处理，能直接看到后端返回的错误详情，方便排查：

try {
  const response = await axios.post('/api/filesRoute/fs', { filename: filename });
  console.log('Success uploading', filename);
  raws.push(response.data.id);
} catch (error) {
  console.error('上传失败:', error.response?.data || error.message);
}

额外排查点 #

• 确认cache文件夹中确实存在对应的.json文件，检查文件名拼写（包括大小写，Windows文件名不区分大小写，但代码中如果存在大小写差异也可能触发问题）。
• 验证.json文件是否被其他进程占用，导致fs.createReadStream无法读取。

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