Node.js目录空检查失效致多文件上传+React视图切换问题求助

一、Node.js后端：目录检查逻辑失效问题 #

问题原因 #

原代码仅在服务器启动时执行一次目录检查，根据结果决定是否注册/upload接口。这会导致两个问题：

• 服务器启动后目录状态变化（比如已上传图片），不会重新触发检查逻辑
• 若启动时目录已有文件，/upload接口直接不注册，既无法上传新文件覆盖旧图，也无法返回明确的错误提示

修正方案 #

将目录检查逻辑移至/upload接口的请求处理流程中，每次上传请求时动态验证目录状态。同时保留固定文件名逻辑（支持覆盖旧图），或直接拒绝新上传（仅允许上传一次），可根据需求选择。

修正后的后端代码：

const express = require('express');
const app = express();
const multer = require('multer');
const cors= require("cors");
const path = require("path");
const fs = require('fs');

app.use(express.json()); 
app.use(cors());
const fileName="map" // 固定文件名
const storage = multer.diskStorage({
  destination :(req,file,cb)=>{
    cb(null,'upload/heat-map');
  },
  filename: (req,file,cb)=>{
    cb(null,fileName+path.extname(file.originalname));
  }
})
const upload = multer({ storage : storage });
const port = 8000;

const isDirectoryEmpty = (directoryPath) => {
  try {
    const files = fs.readdirSync(directoryPath);
    // 过滤隐藏文件（如.DS_Store）
    const validFiles = files.filter(file => !file.startsWith('.'));
    return validFiles.length === 0;
  } catch (error) {
    console.error('读取目录失败:', error);
    return false;
  }
};

const directoryPath = 'upload/heat-map';

// 确保上传目录存在，避免读取失败
if (!fs.existsSync(directoryPath)) {
  fs.mkdirSync(directoryPath, { recursive: true });
}

// 始终注册/upload接口，在请求时动态检查目录
app.post('/upload', upload.single('file'), async (req, res) => {
  if (!req.file) {
    return res.status(400).json({ message: '未选择文件' });
  }

  // 需求1：仅允许上传一次，已有文件则拒绝
  if (!isDirectoryEmpty(directoryPath)) {
    // 删除刚上传的文件
    fs.unlinkSync(path.join(directoryPath, req.file.filename));
    return res.status(403).json({ message: '目录已有图片，禁止重复上传' });
  }

  // 需求2：允许覆盖旧文件（注释掉上面的检查逻辑即可）
  // res.status(200).json({ 
  //   message: '图片上传成功',
  //   imageUrl: `http://localhost:8000/map/${fileName}${path.extname(req.file.originalname)}`
  // });

  res.status(200).json({ message: '图片上传成功' });
});

// 静态文件服务，用于访问上传的图片
app.use('/map', express.static(path.join(__dirname, 'upload','heat-map')));

app.get('/getMap', async (req,res)=>{ 
  try{
    const files = fs.readdirSync(directoryPath);
    const validFiles = files.filter(file => !file.startsWith('.'));
    if (validFiles.length === 0) {
      return res.status(404).json({ message: '未找到图片' });
    }
    res.sendFile(path.join(__dirname, 'upload/heat-map/', validFiles[0]));
  }catch(e){
    console.log(`获取图片失败: ${e}`);
    res.status(500).json({ message: '获取图片失败' });
  }
});

app.listen(port, () => {
  console.log(`服务器运行在端口 ${port}`);
});

二、React前端：上传成功后无法切换组件问题 #

问题原因 #

1. 错误地将函数handleUploadChange与true比较，函数本身永远不可能等于布尔值
2. 后端返回纯文本，前端尝试获取response.imageUrl会得到undefined，状态更新无效
3. DisplayImage组件仅在挂载时获取一次图片，上传新图后无法自动刷新

修正方案 #

• 添加状态变量uploadSuccess跟踪上传状态，上传成功后设为true
• 调整后端返回JSON格式数据，确保前端能正确解析
• 优化DisplayImage组件，支持手动刷新图片

修正后的前端代码：

import { InboxOutlined } from '@ant-design/icons';
import { message, Upload } from 'antd';
import { useState, useEffect } from 'react';

const { Dragger } = Upload;

const App = () => {
  const [uploadSuccess, setUploadSuccess] = useState(false);

  const handleUploadChange = async (info) => {
    const { status } = info.file;
    if (status === 'done') {
      const response = info.file.response;
      if (response && response.message) {
        message.success(`${info.file.name} 上传成功`);
        setUploadSuccess(true);
      }
    } else if (status === 'error') {
      const errorMsg = info.file.response?.message || '上传失败';
      message.error(`${info.file.name} 上传失败: ${errorMsg}`);
    }
  };

  const DisplayImage = () => {
    const [imgPath, setImgPath] = useState('');

    const fetchImage = async () => {
      try {
        const response = await fetch('http://localhost:8000/getMap');
        if (!response.ok) throw new Error('获取图片失败');
        const blob = await response.blob();
        setImgPath(URL.createObjectURL(blob));
      } catch (error) {
        console.error('获取图片出错:', error);
        message.error('加载图片失败');
      }
    };

    // 组件挂载时获取图片
    useEffect(() => {
      fetchImage();
    }, []);

    return (
      <div>
        {imgPath ? (
          <img src={imgPath} alt="已上传图片" style={{ maxWidth: '100%' }} />
        ) : (
          <p>未找到图片</p>
        )}
        {/* 可选：添加重新上传按钮 */}
        <button onClick={() => setUploadSuccess(false)} style={{ marginTop: '10px' }}>
          重新上传图片
        </button>
      </div>
    );
  };

  if (uploadSuccess) {
    return <DisplayImage />;
  } else {
    return (
      <div>
        <Dragger 
          name="file" 
          multiple={false} 
          action="http://localhost:8000/upload" 
          onChange={handleUploadChange}
        >
          <p className="ant-upload-drag-icon">
            <InboxOutlined />
          </p>
          <p className="ant-upload-text">点击或拖拽文件到此处上传</p>
          <p className="ant-upload-hint">
            仅允许上传一张图片，重复上传将被拒绝（或覆盖旧图，取决于后端设置）。
          </p>
        </Dragger>
      </div>
    );
  }
};

export default App;

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