如何从表单获取图片并通过Ajax提交至Laravel？报错Illegal invocation

错误原因 #

你把FormData对象嵌套在了普通的data对象里，jQuery默认会尝试序列化这个data对象，但FormData是专门用于文件上传的特殊容器，无法被常规方式序列化，所以触发了非法调用错误。

正确解决方案 #

直接用FormData存储所有表单数据（包括文本字段和文件），同时在Ajax请求中必须设置两个关键参数：processData: false（阻止jQuery自动序列化数据）和contentType: false（让浏览器自动生成正确的文件上传请求头）。

修改后的代码示例 #

JavaScript/jQuery部分：

$('form').on('click', 'button.btn', function() {
    // 初始化FormData容器
    var formData = new FormData();
    
    // 添加文本字段数据
    formData.append('first_name', $("#first_name").val());
    formData.append('email', $("#email").val());
    formData.append('password', $("#password").val());
    formData.append('re_password', $("#re_password").val());
    formData.append('access_token', getCookie("access_token"));
    
    // 添加文件数据
    jQuery.each($('#image')[0].files, function(i, file) {
        formData.append('image', file);
    });
    
    // 发起Ajax请求
    response = ajaxRequest("http://localhost:8000/api/admins/create", "POST", formData);
});

确保你的ajaxRequest函数包含以下配置：

function ajaxRequest(url, method, data) {
    return $.ajax({
        url: url,
        type: method,
        data: data,
        processData: false, // 必须设置：禁止jQuery处理FormData
        contentType: false, // 必须设置：让浏览器自动生成multipart/form-data头
        // 可添加success、error等回调逻辑
    });
}

简化技巧 #

如果表单字段较多，可直接通过表单元素快速生成FormData，无需逐个append：

// 直接从表单生成包含所有字段的FormData
var formData = new FormData($('#form')[0]);
// 再手动添加不在表单内的字段（比如access_token）
formData.append('access_token', getCookie("access_token"));

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