MERN项目中Axios发送multipart/form-data遇Boundary Not Found错误求助

你的代码存在三个核心问题，导致Boundary Not Found错误和表单失效：

1. 文件输入处理错误：type="file"的输入框，无法通过e.target.value获取文件对象，必须读取e.target.files[0]
2. 提交数据格式错误：上传文件必须用FormData对象封装数据，而不是普通JSON对象
3. Content-Type设置问题：手动指定multipart/form-data会丢失自动生成的boundary，应该让Axios自动处理请求头

修改后的完整代码 #

/* eslint-disable react-hooks/rules-of-hooks */
import { useState } from "react"
import axios from 'axios'

const AdminForm = () => {
    const [formData, setFormData] = useState({
        CategoryName: "",
        EpisodeNo: "",
        EpisodeName: "",
        EpisodeDescription: "",
        imageurl: null,
        audiourl: null
    })

    const handleChange = (e) => {
        const { name, type, files, value } = e.target;
        // 区分文件输入和普通文本输入的处理逻辑
        const inputValue = type === 'file' ? files[0] : value;
        setFormData(prev => ({ ...prev, [name]: inputValue }));
    }

    const onFormSubmit = async (e) => {
        e.preventDefault();
        // 创建FormData对象封装所有表单数据
        const submitData = new FormData();
        Object.entries(formData).forEach(([key, value]) => {
            if (value) {
                submitData.append(key, value);
            }
        });

        try {
            const res = await axios.post(
                'http://localhost:4000/api/podcasts/uploadpodcast',
                submitData
                // 无需手动设置Content-Type，Axios会自动添加带正确boundary的multipart请求头
            );
            console.log(res);
        } catch (err) {
            console.error(err);
        }
    }

    return (
        <>
            <form className="m-10" onSubmit={onFormSubmit}>
                {/* 移除表单默认的action、method、encType，避免和Axios提交逻辑冲突 */}
                <div className="p-2 flex flex-col">
                    <label htmlFor="CategoryName">Enter Category Name</label>
                    <input
                        type="text"
                        name="CategoryName"
                        onChange={handleChange}
                        value={formData.CategoryName}
                    />
                </div>
                <div className="p-2 flex flex-col">
                    <label htmlFor="EpisodeNo">Enter Episode Number</label>
                    <input
                        type="text"
                        name="EpisodeNo"
                        onChange={handleChange}
                        value={formData.EpisodeNo}
                    />
                </div>
                <div className="p-2 flex flex-col">
                    <label htmlFor="EpisodeName">Enter Episode Name</label>
                    <input
                        type="text"
                        name="EpisodeName"
                        onChange={handleChange}
                        value={formData.EpisodeName}
                    />
                </div>
                <div className="p-2 flex flex-col">
                    <label htmlFor="EpisodeDescription">Enter Episode Description</label>
                    <input
                        type="text"
                        name="EpisodeDescription"
                        onChange={handleChange}
                        value={formData.EpisodeDescription}
                    />
                </div>
                <div className="p-2 flex flex-col">
                    <label htmlFor="audiourl">Enter Audio</label>
                    <input
                        type="file"
                        name="audiourl"
                        onChange={handleChange}
                        {/* 文件输入禁止手动设置value，浏览器不允许修改文件路径 */}
                    />
                </div>
                <div className="p-2 flex flex-col">
                    <label htmlFor="imageurl">Enter Image</label>
                    <input
                        type="file"
                        name="imageurl"
                        onChange={handleChange}
                    />
                </div>
                {/* 用表单的onSubmit事件触发提交，按钮设为submit类型更规范 */}
                <button type="submit">Submit</button>
            </form>
        </>
    )
}

export default AdminForm

关键改动说明 #

1. 文件输入处理：判断输入类型为file时，直接取files[0]存入状态，同时移除文件输入框的value属性（浏览器安全限制）
2. FormData封装：用FormData统一收集字段和文件，确保数据符合multipart/form-data格式要求
3. Axios提交优化：不手动设置请求头，Axios会自动识别FormData并生成带正确boundary的Content-Type
4. 表单事件规范：绑定表单的onSubmit事件替代按钮的onClick，移除表单默认的提交配置，避免逻辑冲突

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