多文件上传时Ajax请求异常：上传后无数据输出且加载状态持续

嘿，我看你遇到了多文件上传的头疼问题——明明文件已经传完了，前端却一直显示加载，控制台也没输出。结合你给的代码片段，我帮你梳理几个最可能的原因，还有对应的修复办法：

1. 浏览器并发请求限制坑了你 #

浏览器对同一域名的并发请求数是有上限的（一般是6-8个），如果你的代码是循环着逐个发起上传请求，当文件数量超过这个数时，后面的请求会排队等着，前端就会误以为还在加载中。

怎么修？ #

要么改成批量上传（把所有文件塞到同一个FormData里，前提是后端支持接收多文件）：

// 假设你是从文件输入框拿的文件，把所有文件都append进去
const files = $('input[type="file"]')[0].files;
files.forEach(file => {
  formdata.append('images[]', file); // 用数组命名，后端好接收
});

要么做个请求队列控制并发数，别让请求堆在一起：

// 单个文件上传的Promise函数
const uploadSingleFile = (file) => {
  let formData = new FormData();
  formData.append('_token', $('input[name="_token"]').val());
  formData.append('image', file);
  
  return $.ajax({
    url: '/你的上传接口',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    beforeSend: () => { /* 这里可以加单个文件的加载提示 */ }
  });
};

// 控制并发数为6，适配浏览器限制
const batchUpload = async (files, limit = 6) => {
  let currentIndex = 0;
  const uploadTask = async () => {
    while (currentIndex < files.length) {
      const file = files[currentIndex++];
      await uploadSingleFile(file);
    }
  };
  // 启动指定数量的并发任务
  await Promise.all(Array(limit).fill().map(uploadTask));
  
  // 所有上传完成后，关掉全局加载状态
  $('.loading').hide();
  console.log('所有文件上传搞定啦！');
};

// 调用的时候传所有文件就行
batchUpload($('input[type="file"]')[0].files);

2. 前端没监听“全部完成”的状态 #

你可能只处理了单个文件的上传回调，但没统计所有文件的完成情况——最后一个文件传完后，没人告诉前端“可以关掉加载了”，所以就一直卡着。

怎么修？ #

加个计数器，每完成一个文件就加1，等计数器等于总文件数时，就结束加载：

const totalFiles = $('input[type="file"]')[0].files.length;
let completedCount = 0;

// 放到单个文件上传的success和error回调里
success: (res) => {
  completedCount++;
  // 展示上传好的图片
  $('div.pond div.pond-img-list').append(`<img src="${res.url}" alt="上传的图片">`);
  
  // 检查是不是全部完成了
  if (completedCount === totalFiles) {
    console.log('所有文件上传完成！');
    $('.loading').hide(); // 关掉加载状态
  }
},
error: (xhr) => {
  completedCount++;
  console.error('这个文件传失败了', xhr.responseText);
  // 就算失败也要计数，不然会一直卡加载
  if (completedCount === totalFiles) {
    $('.loading').hide();
    console.log('上传任务全部结束啦（有几个失败了）');
  }
}

3. 服务器端没正确返回响应 #

有时候文件已经传到服务器，但后端处理多文件时超时、内存不够，或者出错了没返回响应，导致前端的请求一直处于pending状态，自然就卡加载了。

怎么排查？ #

打开浏览器的Network面板，看看每个上传请求的状态：

• 如果请求一直是pending，那就是后端的问题——检查下上传接口的超时设置，或者多文件处理时的内存占用；
• 如果是500/4xx错误，说明后端处理失败，前端要把这些错误捕获到，别让请求挂着。
  另外，后端要确保每个文件上传后都返回明确的响应（成功/失败），哪怕部分文件失败，也得让前端知道。

4. FormData构建错了 #

如果你的代码是循环里重复创建FormData，或者没正确把所有文件append进去，也会导致部分请求出问题。

检查点： #

• 批量上传时，要用images[]这种数组键名，后端才能接收到多个文件；
• 如果是逐个上传，每个请求都要新建一个FormData，别复用同一个。

最后给你个快速定位的小技巧：先开Network面板看请求状态，要是有请求一直pending，就找后端排查；要是所有请求都成功了，但前端没结束加载，那就是回调逻辑的问题，补个计数器就行。

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