ReactJs中上传图片并保存至项目目录的技术问询

前端仅能获取文件对象，无法直接操作服务器端的项目目录，必须通过后端接口接收文件并完成存储。以下是完整实现步骤：

1. 完善前端上传逻辑 #

优化前端代码，将选中的文件通过FormData发送给后端接口：

// 组件内状态管理
const [selectedFiles, setSelectedFiles] = useState([]);

// 文件选择处理函数
const fileSelectedHandler = (e) => {
  setSelectedFiles(Array.from(e.target.files));
};

// 提交处理函数
const handleClick = async (e) => {
  e.preventDefault();
  const formData = new FormData();
  
  // 遍历选中文件，添加到FormData
  selectedFiles.forEach(file => {
    formData.append('images', file);
  });

  try {
    // 发送POST请求到后端上传接口
    await fetch('/api/upload-images', {
      method: 'POST',
      body: formData
    });
    alert('图片上传保存成功');
  } catch (error) {
    console.error('上传失败:', error);
    alert('上传失败，请重试');
  }
};

修正后的JSX部分（文件输入框无需绑定value属性，它是只读控件）：

<div className="tab">
  <input type="radio" name="css-tabs" id="tab-3" className="tab-switch" />
  <div className="tab-content"> 
    <label>
      <span>Images <span className="required">*</span></span><br/>  
      <input 
        id="file" 
        type="file" 
        multiple 
        onChange={fileSelectedHandler} 
        name="images" 
      />
    </label>
    <input type="submit" onClick={handleClick} value="Add message" className="submitButton"/>
  </div>
</div>

2. 后端实现（Node.js/Express示例） #

以Node.js+Express为例，使用multer中间件处理文件上传并保存到项目目录：

步骤1：安装依赖 #

npm install multer --save

步骤2：编写上传接口 #

const express = require('express');
const multer = require('multer');
const path = require('path');
const router = express.Router();

// 配置multer存储规则
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    // 指定保存到项目的public/images目录（需提前创建该目录）
    cb(null, path.join(__dirname, '../public/images'));
  },
  filename: function (req, file, cb) {
    // 生成唯一文件名，避免重名冲突
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
  }
});

const upload = multer({ storage: storage });

// 处理多文件上传的接口
router.post('/upload-images', upload.array('images', 10), (req, res) => {
  if (!req.files || req.files.length === 0) {
    return res.status(400).json({ message: '未选择文件' });
  }
  res.status(200).json({ 
    message: '文件上传成功',
    files: req.files.map(file => ({
      filename: file.filename,
      accessPath: `/images/${file.filename}`
    }))
  });
});

module.exports = router;

步骤3：在Express主文件注册路由 #

const app = express();
const uploadRouter = require('./routes/upload');

app.use('/api', uploadRouter);

app.listen(3001, () => {
  console.log('后端服务运行在3001端口');
});

注意事项 #

• 确保后端存储目录（如public/images）已存在，否则multer会抛出错误。
• 前后端端口不同时需配置CORS，解决跨域问题。
• 生产环境需添加文件类型校验、大小限制，防范恶意文件上传。

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