React中使用上传框上传图片后，如何将图片移动至public目录？

针对你开发CRUD仪表盘时的图片上传需求，当前代码存在两个核心问题：URL.createObjectURL生成的是临时Blob URL（页面刷新即失效），且formData.image无法自动同步path的更新值。以下是完整的修正方案：

一、前端表单处理优化 #

修复状态同步问题，同时实现图片预览和表单提交逻辑：

import { useState } from 'react';
import { nanoid } from 'nanoid';

function Product() {
  const [selectedFile, setSelectedFile] = useState(null);
  const [previewUrl, setPreviewUrl] = useState('');
  const [formData, setFormData] = useState({
    id: nanoid(),
    title: '',
    price: '',
    description: '',
    category: '',
    image: '', // 预留字段，后续填充持久化路径
    rating: {
      rate: 0,
      count: 0,
    },
  });

  // 处理普通表单输入
  const handleInputChange = e => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  // 处理文件选择与预览
  const handleFileChange = e => {
    const file = e.target.files[0];
    if (file) {
      setSelectedFile(file);
      setPreviewUrl(URL.createObjectURL(file));
    }
  };

  // 提交表单：上传文件+保存产品数据到JSON
  const handleSubmit = async e => {
    e.preventDefault();
    if (!selectedFile) return;

    const uploadData = new FormData();
    uploadData.append('image', selectedFile);
    uploadData.append('productData', JSON.stringify(formData));

    try {
      const response = await fetch('/api/upload-product', {
        method: 'POST',
        body: uploadData
      });
      const result = await response.json();
      console.log('产品创建成功:', result);
      
      // 重置表单
      setFormData({
        id: nanoid(),
        title: '',
        price: '',
        description: '',
        category: '',
        image: '',
        rating: { rate: 0, count: 0 }
      });
      setSelectedFile(null);
      setPreviewUrl('');
    } catch (error) {
      console.error('上传失败:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>标题:</label>
        <input type="text" name="title" value={formData.title} onChange={handleInputChange} required />
      </div>
      <div>
        <label>价格:</label>
        <input type="number" name="price" value={formData.price} onChange={handleInputChange} required />
      </div>
      <div>
        <label>产品图片:</label>
        <input type="file" accept="image/*" onChange={handleFileChange} required />
        {previewUrl && <img src={previewUrl} alt="图片预览" style={{ width: '120px', marginTop: '8px' }} />}
      </div>
      <div>
        <label>分类:</label>
        <input type="text" name="category" value={formData.category} onChange={handleInputChange} required />
      </div>
      <div>
        <label>描述:</label>
        <textarea name="description" value={formData.description} onChange={handleInputChange} rows="3" required />
      </div>
      <button type="submit" style={{ marginTop: '16px' }}>创建产品</button>
    </form>
  );
}

export default Product;

二、后端文件与JSON处理逻辑（Node.js/Express示例） #

前端无法直接写入本地文件系统，需通过后端接口完成图片保存和JSON数据更新：

const express = require('express');
const multer = require('multer');
const fs = require('fs');
const path = require('path');

const app = express();
const PORT = 5000;

// 配置multer：将图片保存到public/images目录
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    const imageDir = path.join(__dirname, 'public', 'images');
    // 自动创建不存在的目录
    if (!fs.existsSync(imageDir)) fs.mkdirSync(imageDir, { recursive: true });
    cb(null, imageDir);
  },
  filename: (req, file, cb) => {
    // 生成唯一文件名，避免重名覆盖
    const uniqueFilename = `${Date.now()}-${Math.random().toString(36).slice(2, 10)}${path.extname(file.originalname)}`;
    cb(null, uniqueFilename);
  }
});

const upload = multer({ storage });

// 处理产品上传的接口
app.post('/api/upload-product', upload.single('image'), (req, res) => {
  if (!req.file) return res.status(400).json({ error: '请选择要上传的图片' });

  // 解析前端传递的产品数据
  const productData = JSON.parse(req.body.productData);
  // 设置图片的相对访问路径（前端可直接使用）
  productData.image = `/images/${req.file.filename}`;

  // 读取现有产品JSON数据（如果文件不存在则初始化空数组）
  const productsFilePath = path.join(__dirname, 'products.json');
  let products = [];
  if (fs.existsSync(productsFilePath)) {
    products = JSON.parse(fs.readFileSync(productsFilePath, 'utf8'));
  }

  // 添加新产品并写入JSON文件
  products.push(productData);
  fs.writeFileSync(productsFilePath, JSON.stringify(products, null, 2));

  res.json({ success: true, product: productData });
});

// 配置静态文件服务，让public目录下的资源可访问
app.use(express.static('public'));

app.listen(PORT, () => {
  console.log(`服务器运行在 http://localhost:${PORT}`);
});

核心注意事项 #

1. 确保项目根目录存在public文件夹，后端会自动在其中创建images子目录存储上传的图片
2. products.json会自动创建在项目根目录，用于存储产品的完整数据（包含图片相对路径）
3. 前端访问图片时，直接使用image字段的路径即可（如src={product.image}）

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