React JS中使用Axios构建FormData报错：参数非HTMLFormElement类型

问题根源 #

1. 选择器语法错误：你用document.querySelector("formElement")是在查找标签名为<formElement>的元素，但你的表单是通过id="formElement"定义的，正确的id选择器应该是#formElement。
2. React渲染时机问题：组件函数执行时，return中的JSX还没挂载到DOM树，此时直接调用document.querySelector会返回null。React中推荐使用useRef来安全获取DOM元素，而非直接操作DOM。

修正后的代码 #

import { useRef } from 'react';
import axios from 'axios';

function Verify() {
    // 创建ref关联表单元素
    const formRef = useRef(null);

    const submitApplication = (e) => {
        e.preventDefault();
        // 通过ref.current获取表单DOM元素
        const formData = new FormData(formRef.current);

        // 注意：Axios会自动识别FormData并设置正确的multipart/form-data请求头（含boundary），无需手动设置
        axios.post('http://localhost:3001/stats', formData)
            .then(() => {
                console.log("Successfully Sent!");
            })
            .catch(error => {
                console.error("发送失败:", error);
            });
    };

    return (
        <>
            {/* 将ref绑定到表单元素 */}
            <form ref={formRef} encType="multipart/form-data" method="post">
                <input type="text" placeholder="Full Name" name="fname" />
                <input type="file" name="uploaded_file" />
                <button onClick={submitApplication}>Submit for Review</button>
            </form>
        </>
    );
}

export default Verify;

额外提示 #

• 不要手动设置Content-Type: multipart/form-data，Axios会自动根据FormData生成包含正确boundary的请求头，手动设置可能导致服务器无法解析表单数据。
• 建议在请求中添加catch块处理错误，便于调试发送失败的情况。

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