Laravel中表单serialize配合AJAX上传文件仅获取CSRF令牌的问题

你遇到的请求参数缺失是典型的API使用场景错配，完全不是表单DOM结构的问题，由两个叠加的错误导致：

• 第一，serialize()本身不支持文件上传场景
  jQuery的.serialize()从设计上就只能收集普通文本类表单字段（文本框、下拉框、单选/多选按钮）的键值对，完全无法读取文件输入框（<input type="file">）里的二进制文件内容，这个方法天生就不适合用来做带文件提交的AJAX数据收集。
• 第二，AJAX配置和传入的数据类型完全不匹配
  你代码里设置的contentType: false、processData: false两个参数，是专门为FormData对象准备的：
  • processData: false的作用是告诉jQuery，不要把传入的数据做自动的URL编码字符串转换
  • contentType: false的作用是告诉jQuery不要手动覆写请求头，由浏览器根据FormData的格式自动生成带边界标识的multipart/form-data类型请求头
    但你实际传给AJAX的data是.serialize()生成的普通URL编码字符串，和配置要求的类型完全不匹配。当Content-Type被强制关闭后，浏览器不会把传入的字符串按照普通表单格式拆分解析字段，最终就会出现参数收集不全的异常——这也是你现在只能看到CSRF令牌被发出去、其他字段全部丢失的直接原因。

只需要把原来用.serialize()收集数据的逻辑，替换为原生FormData对象即可，配合你已经写好的AJAX参数，就能完整收集所有表单内容（包括下拉框取值、CSRF令牌、选中的文件内容），修改后的代码：

$(document).on("click", '#importFile', function(e) {
  e.preventDefault();
  // 初始化FormData，把整个表单的所有字段和文件全部塞进去
  var data = new FormData($('#uploadFileFrm')[0]);
  $.ajax({
    type: 'POST',
    cache: false,
    contentType: false,
    processData: false,
    url: "{{ url('/uploadfile') }}",
    data: data,
    success: function(res) {
      // 原有成功回调逻辑
    }
  });
});

修改后如果还是发现tas下拉框的值没有被带上，检查两个细节即可：

• 测试时是否确实选中了下拉框的有效选项：当前下拉框的默认选中项是值为空的占位选项，如果未做选择，收集到的tas值本身就是空字符串
• 确认所有需要提交的表单元素都带有合法的name属性：没有name属性的元素，不管是serialize还是FormData都不会收集它的值

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