React中如何用useState存储图片并在MERN栈中传至后端

问题核心 #

你拿到的C:\\fakepath\\xxx.jpg是浏览器出于安全机制生成的伪路径，并非实际文件。要正确处理图片上传，需要从input[type="file"]中获取File对象，通过FormData格式提交给后端，后端用multer处理文件存储后，将文件路径存入MongoDB。

前端修改步骤 #

1. 修正图片状态存储逻辑

把onChange事件里的e.target.value改成e.target.files[0]（单文件上传场景），同时初始化状态为null而非数组：

const [preview_img, setPreviewImg] = useState(null)

// 图片上传的onChange事件
<input
    type="file"
    name="preview_img"
    accept="image/*"
    onChange={(e) => setPreviewImg(e.target.files[0])}
/>

2. 重构表单提交逻辑，改用FormData

不能用JSON.stringify传输文件，改用FormData封装所有表单数据：

const handleSubmit = async (e) => {
    e.preventDefault()
    console.log('button clicked')

    // 创建FormData实例
    const formData = new FormData()
    // 追加文本字段
    formData.append('sdg', sdg)
    formData.append('goal', goal)
    formData.append('orginization', orginization) // 注意拼写：organization
    formData.append('source', source)
    formData.append('location', location)
    formData.append('published', published)
    formData.append('website_url', website_url)
    formData.append('assignment_type', assignment_type)
    formData.append('sharepoint_link', sharepoint_link)
    formData.append('statement', statement)
    // 关键词数组需转成JSON字符串，后端再解析
    formData.append('keywords', JSON.stringify(keywords))
    // 存在图片则追加文件
    if (preview_img) {
        formData.append('preview_img', preview_img)
    }

    // 发送请求，不要手动设置Content-Type，FormData会自动处理
    const response = await fetch('/api/projects', {
        method: 'POST',
        body: formData
    })
    const json = await response.json() // 注意这里之前漏了括号：response.json()

    // 错误处理和表单重置逻辑
    if (!response.ok) {
        setError(json.error)
    }
    if (response.ok) {
        setSDG('')
        setGoal('')
        setOrginization('')
        setSource('')
        setLocation('')
        setPublished('')
        setWebsiteURL('')
        setAssignmentType('')
        setKeywords([])
        setSharepointLink('')
        setStatement('')
        setPreviewImg(null) // 重置图片状态
        
        setError(null)
        alert('Project added!')
        console.log('new project added', json)
    }
}

后端配置（Node.js/Express + MongoDB） #

1. 安装multer依赖

npm install multer

2. 配置multer存储和路由

在后端路由文件（比如routes/projects.js）中：

const express = require('express')
const router = express.Router()
const multer = require('multer')
const Project = require('../models/Project') // 你的Project模型

// 配置multer存储路径和文件名
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/') // 需手动在项目根目录创建uploads文件夹
    },
    filename: function (req, file, cb) {
        // 生成唯一文件名避免重复
        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
        cb(null, file.fieldname + '-' + uniqueSuffix + '.' + file.originalname.split('.').pop())
    }
})

const upload = multer({ storage: storage })

// 处理POST请求，用upload.single处理单文件上传
router.post('/', upload.single('preview_img'), async (req, res) => {
    try {
        // 解析关键词数组
        const keywords = JSON.parse(req.body.keywords)
        // 构建项目数据，图片路径存req.file.path
        const projectData = {
            sdg: req.body.sdg,
            goal: req.body.goal,
            orginization: req.body.orginization,
            source: req.body.source,
            location: req.body.location,
            published: req.body.published,
            website_url: req.body.website_url,
            assignment_type: req.body.assignment_type,
            keywords: keywords,
            sharepoint_link: req.body.sharepoint_link,
            statement: req.body.statement,
            preview_img: req.file ? req.file.path : null // 无文件则存null
        }

        const project = new Project(projectData)
        await project.save()
        res.status(201).json(project)
    } catch (error) {
        res.status(400).json({ error: error.message })
    }
})

module.exports = router

3. 静态资源配置（可选，用于前端展示图片）

如果需要在前端访问上传的图片，在app.js或server.js中把uploads文件夹设为静态资源：

app.use('/uploads', express.static('uploads'))

4. 调整MongoDB模型

确保Project模型（models/Project.js）包含preview_img字段：

const mongoose = require('mongoose')

const projectSchema = new mongoose.Schema({
    sdg: {
        type: String,
        required: true
    },
    goal: {
        type: String,
        required: true
    },
    // ... 其他字段
    preview_img: {
        type: String, // 存储文件路径
        default: null
    }
})

module.exports = mongoose.model('Project', projectSchema)

关键注意事项 #

• 浏览器的fakepath是安全限制，无法绕过，必须通过File对象处理上传。
• 传输文件必须用FormData，不能用JSON格式。
• 后端必须用multer或类似中间件处理multipart/form-data类型请求。
• 生产环境建议将图片存储到云服务（如AWS S3、阿里云OSS），而非服务器本地，避免存储容量和性能问题。

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