React/MUI表单向API上传文件失败：问题排查与解决方案

问题核心 #

你的代码存在两个关键问题导致上传失败：

1. 文件输入未绑定onChange事件：选择文件后没有将File对象存入form状态，isRequired校验时form.image始终为空，无法通过校验。
2. 直接传递普通对象给axios：上传文件必须使用FormData格式，普通JSON对象无法被后端解析为文件数据。

修复步骤 #

1. 绑定文件输入事件，正确存储File对象 #

给文件输入框添加onChange事件，并修改handleForm函数区分普通输入和文件输入：

<input
    label='Image' 
    name='image' 
    accept="image/*"
    style={{ display: 'none' }}
    id="raised-button-file"
    type="file"
    onChange={handleForm} // 新增绑定
/>

更新handleForm函数：

const handleForm = (e) => {
    const { name, type, files } = e.target;
    // 文件输入取第一个文件，普通输入取value
    const value = type === 'file' ? files[0] : e.target.value;

    setForm(prevState => ({
        ...prevState,
        [name]: value
    }));
};

2. 调整必填项校验逻辑 #

文件是File对象，不能用简单的!form[field]判断，需检查是否为有效文件：

const isRequired = (fields) => {
    let error = false;
    // 先清空之前的错误提示
    setErrors({});

    fields.forEach(field => {
        const value = form[field];
        const isEmpty = field === 'image' 
            ? !value || !(value instanceof File)
            : !value;

        if(isEmpty){
            error = true;
            setErrors(prevState => ({
                ...prevState,
                [field]: {
                    message: `${field} is required!!!!`
                }
            }));
        }
    });

    return error;
};

3. 用FormData包装请求数据 #

提交时将表单数据转换为FormData，这是文件上传的标准格式：

const submitForm = () => {
    console.log("submitForm called")
    
    if(!isRequired(['title', 'image'])){
        const token = localStorage.getItem('token');
        console.log("isRequired passed")

        const formData = new FormData();
        formData.append('title', form.title);
        formData.append('image', form.image);

        axios.post('/movies', formData, {
            headers: {
                "Authorization": `Bearer ${token}`
                // axios会自动检测FormData并设置正确的Content-Type，无需手动配置
            }
        })
        .then(response => {
            console.log(response.data);
            navigate('/movies');
        })
        .catch(err => {
            console.error(err);
            console.log(err.response?.data?.message || '请求失败');
            setErrors(err.response?.data?.errors || {});
        });
    }
};

4. 优化MUI交互（可选） #

添加文件名展示，让用户直观看到已选择的文件：

<div className='form-group'>
    <input
        label='Image' 
        name='image' 
        accept="image/*"
        style={{ display: 'none' }}
        id="raised-button-file"
        type="file"
        onChange={handleForm}
    />
    <label htmlFor="raised-button-file">
        <Button variant="contained" component="span" className={'form-group'}>
            Upload
        </Button>
    </label>
    {/* 新增文件名展示 */}
    {form.image && <p className='file-name'>已选择：{form.image.name}</p>}
</div>

完整修复后的代码 #

import { useState } from 'react';
import axios from '../../config';
import { useNavigate } from 'react-router-dom';
import TextField from '@mui/material/TextField'; // 修正拼写错误：Textfield → TextField
import Button from '@mui/material/Button';

const Create = () => {
    const [form, setForm] = useState({});
    const [errors, setErrors] = useState({});
    const navigate = useNavigate();
    
    const handleForm = (e) => {
        const { name, type, files } = e.target;
        const value = type === 'file' ? files[0] : e.target.value;

        setForm(prevState => ({
            ...prevState,
            [name]: value
        }));
    };

    const isRequired = (fields) => {
        let error = false;
        setErrors({});

        fields.forEach(field => {
            const value = form[field];
            const isEmpty = field === 'image' 
                ? !value || !(value instanceof File)
                : !value;

            if(isEmpty){
                error = true;
                setErrors(prevState => ({
                    ...prevState,
                    [field]: {
                        message: `${field} is required!!!!`
                    }
                }));
            }
        });

        return error;
    };

    const submitForm = () => {
        console.log("submitForm called")
        
        if(!isRequired(['title', 'image'])){
            const token = localStorage.getItem('token');
            console.log("isRequired passed")

            const formData = new FormData();
            formData.append('title', form.title);
            formData.append('image', form.image);

            axios.post('/movies', formData, {
                headers: {
                    "Authorization": `Bearer ${token}`
                }
            })
            .then(response => {
                console.log(response.data);
                navigate('/movies');
            })
            .catch(err => {
                console.error(err);
                console.log(err.response?.data?.message || '请求失败');
                setErrors(err.response?.data?.errors || {});
            });
        }
    };

    return (
        <>
            <h2>Create</h2>

            <div className='form-group'>
                <TextField 
                    variant='filled' 
                    label='Title' 
                    name='title' 
                    onChange={handleForm}
                    error={!!errors.title} // 修正为布尔值判断
                    helperText={errors.title?.message}
                />
            </div>
            <div className='form-group'>
                <input
                    label='Image' 
                    name='image' 
                    accept="image/*"
                    style={{ display: 'none' }}
                    id="raised-button-file"
                    type="file"
                    onChange={handleForm}
                />
                <label htmlFor="raised-button-file">
                    <Button variant="contained" component="span" className={'form-group'}>
                        Upload
                    </Button>
                </label>
                {form.image && <p className='file-name'>已选择文件：{form.image.name}</p>}
            </div>

            <Button onClick={submitForm} variant='contained'>Submit</Button>
        
        </>
    );
};

export default Create;

额外注意点 #

• 修正了TextField的拼写错误（原代码写成Textfield）。
• MUI的Button组件variant="raised"已废弃，改用variant="contained"。

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