如何使用Axios上传4GB.mp4/.mov视频？上传至9%即中断求助

核心原因分析 #

上传到9%中断，大概率是超时限制或单次上传体积过大导致服务器/客户端主动终止请求，以下是针对性解决方法：

1. 调整超时配置 #

客户端（Axios） #

取消默认超时限制，或设置足够大的超时值：

axios.post('/api/upload', formData, {
  timeout: 0, // 无超时限制（大文件上传推荐）
  // 也可设置超大超时，比如3600000ms = 1小时
  // timeout: 3600000,
  onUploadProgress: (e) => {
    const progress = Math.round((e.loaded / e.total) * 100);
    console.log(`上传进度: ${progress}%`);
  }
});

服务器端 #

• Nginx配置：修改nginx.conf或站点配置文件，增大请求体积和超时时间

http {
  client_max_body_size 5G; # 允许最大5GB请求
  proxy_connect_timeout 300s;
  proxy_send_timeout 300s;
  proxy_read_timeout 300s;
}

• Node.js（Express）：调整body解析器和文件处理中间件的限制

const express = require('express');
const multer = require('multer');
const app = express();

app.use(express.json({ limit: '5GB' }));
app.use(express.urlencoded({ limit: '5GB', extended: true }));

const upload = multer({
  storage: multer.diskStorage({
    destination: './uploads',
    filename: (req, file, cb) => cb(null, file.originalname)
  }),
  limits: { fileSize: 5 * 1024 * 1024 * 1024 } // 5GB限制
});

2. 必做：分块上传（大文件唯一可靠方案） #

单次上传4GB文件极易触发各类限制，必须拆分文件为小块（如100MB/块）分别上传，后端合并。

Axios分块上传示例 #

const uploadLargeVideo = async (file) => {
  const chunkSize = 100 * 1024 * 1024; // 100MB每块
  const totalChunks = Math.ceil(file.size / chunkSize);
  let completedChunks = 0;

  for (let i = 0; i < totalChunks; i++) {
    const start = i * chunkSize;
    const end = Math.min(start + chunkSize, file.size);
    const chunkBlob = file.slice(start, end);

    const formData = new FormData();
    formData.append('videoChunk', chunkBlob);
    formData.append('chunkIndex', i);
    formData.append('totalChunks', totalChunks);
    formData.append('fileName', file.name);

    try {
      await axios.post('/api/upload-chunk', formData, {
        headers: { 'Content-Type': 'multipart/form-data' },
        timeout: 0,
        onUploadProgress: (e) => {
          const currentChunkProgress = Math.round((e.loaded / e.total) * 100);
          const overallProgress = Math.round(
            ((completedChunks * chunkSize) + e.loaded) / file.size * 100
          );
          console.log(`总进度: ${overallProgress}% | 当前块进度: ${currentChunkProgress}%`);
        }
      });
      completedChunks++;
    } catch (err) {
      console.error(`第${i}块上传失败，重试中...`, err);
      i--; // 重试当前块（可限制重试次数）
    }
  }

  // 所有块上传完成，通知后端合并文件
  await axios.post('/api/merge-video', {
    fileName: file.name,
    totalChunks: totalChunks
  });
  alert('视频上传完成！');
};

3. 排查其他可能问题 #

• 取消令牌误触发：检查代码中是否使用了CancelToken，确保上传过程中没有意外调用取消方法
• 浏览器/网络限制：关闭浏览器插件（如广告拦截器），测试稳定网络环境；Chrome等浏览器对超大请求有隐性限制，分块上传可规避
• 后端存储权限：确保服务器存储目录有足够空间和写入权限，避免因磁盘满导致上传中断

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