无法将React useState数据提交至MySQL的技术求助

前端问题与修复 #

1. 阻止表单默认提交行为
   表单提交会触发页面刷新，导致axios请求被中断，必须在提交函数里调用e.preventDefault()。

2. 正确处理文件上传（改用FormData）
   你当前用URL.createObjectURL生成的是本地预览地址，无法直接存入数据库。需要用FormData封装表单数据（包括文件），适配multipart/form-data编码格式。

修改后的前端关键代码：

function onSubmitHandler(e) {
    e.preventDefault(); // 阻止页面默认刷新
    const formData = new FormData();
    // 逐个添加表单字段
    formData.append('ProjectName', AddProjects.ProjectName);
    formData.append('Discription', AddProjects.Discription);
    formData.append('git', AddProjects.git);
    // 添加文件（直接取input的文件对象，而非预览URL）
    formData.append('Img', inputFile.current.files[0]);

    axios.post(`http://localhost:3060/addProjects`, formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    }).then(() => {
        getProjectList(); // 成功后再刷新列表，避免异步顺序问题
        // 重置表单状态
        setAddProjects({
            ProjectName:"",
            Discription:"",
            git:"",
            Img:""
        });
        inputFile.current.value = "";
    }).catch(err => {
        console.error('提交失败:', err);
    });
}

// 图片选择逻辑仅做预览（可选），无需将预览URL存入状态
function imgChange(e) {
    const previewUrl = URL.createObjectURL(e.target.files[0]);
    // 若需预览，可新增状态存储previewUrl并渲染到页面
    // setPreviewImg(previewUrl);
}

后端问题与修复 #

1. 替换bodyParser，用multer处理文件上传
   bodyParser.json()无法解析multipart/form-data格式数据，需使用multer中间件处理文件。先安装依赖：

npm install multer

2. 修复SQL语句，避免注入风险
   原INSERT语句未对应表字段，且直接拼接字符串会引发SQL注入。需使用参数化查询，同时指定插入字段（若ProjectId为自增主键，无需手动传入）。

修改后的后端代码：

const express = require('express');
const cors = require('cors');
const PORT = 3060;
const db = require('./Database');
const multer = require('multer');
// 配置文件存储路径与命名规则
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, './uploads'); // 确保uploads文件夹已创建
    },
    filename: (req, file, cb) => {
        cb(null, Date.now() + '-' + file.originalname); // 避免文件名重复
    }
});
const upload = multer({ storage: storage });

const app = express();

app.use(cors());
app.use(express.json());
app.use(express.static('uploads')); // 允许前端访问上传的图片

app.get('/projects', (req,res) => {
    const TASK_QUERY = `SELECT * FROM addprojects.newproject`;
    db.query(TASK_QUERY , (err, response) => {
        if(err) {
            console.error(err);
            return res.status(500).send('查询失败');
        }
        res.send(response);
    });
});

// 用upload.single('Img')处理单个文件上传，字段名需与前端FormData一致
app.post('/addProjects', upload.single('Img'), (req,res) => {
    const { ProjectName, Discription, git } = req.body;
    const ImgPath = req.file.path; // 存储文件相对路径，而非文件本身

    // 参数化查询，?为占位符，避免SQL注入
    const ADD_QUERY = `INSERT INTO addprojects.newproject (ProjectName, Discription, git, Img) VALUES (?, ?, ?, ?)`;
    db.query(ADD_QUERY, [ProjectName, Discription, git, ImgPath], (err) => {
        if (err) {
            console.error(err);
            return res.status(500).send('添加失败');
        }
        res.send('项目添加成功');
    });
});

app.listen(PORT, () => {
    console.log(`app is listening to port ${PORT}`); // 修正端口号显示错误
});

3. 数据库表配置提示

• 确保newproject表的ProjectId设为自增主键（AUTO_INCREMENT）
• Img字段类型设为VARCHAR，用于存储文件路径（不建议直接存二进制文件）

额外建议 #

• 前端需添加错误提示，让用户知晓提交状态
• 可对上传文件做格式、大小校验（比如限制图片不超过2MB）
• 生产环境建议将文件存到云存储（如OSS、S3），而非服务器本地

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