axios提交对象数组报错Body Exceeded 1mb limit，搭配react-dropzone上传如何解决

• 第一步：调整Next.js API路由的请求体大小限制
  你遇到的报错是Next.js API路由默认限制请求体最大为1MB导致的，找到你对应/api/multi接口的文件，在文件末尾导出配置即可调整上限：

// pages/api/multi.js （Pages Router写法）
export const config = {
  api: {
    bodyParser: {
      sizeLimit: '10mb', // 可根据实际需求调整为20mb、50mb等值
    },
  },
};

如果需要全局调整所有API的请求体限制，可以修改项目根目录的next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  api: {
    bodyParser: {
      sizeLimit: '20mb',
    },
  },
}
module.exports = nextConfig

如果是App Router结构，在对应app/api/multi/route.js中添加如下配置即可：

export const dynamic = 'force-dynamic'
export const maxBodySize = 10 * 1024 * 1024 // 10MB，单位为字节

• 第二步：优化提交数据，移除冗余内容
  你用music-metadata提取的元数据中，默认会包含音频封面的base64编码内容，这部分数据体积极大，是导致请求超容的常见原因。如果你的业务不需要存储封面数据，可以在提取元数据时直接过滤该字段：

// 修改Dropzone中的元数据处理逻辑
acceptedFiles.map(async (file) => {
  let fileContents = {
    _id: uuidv4(),
    path: file.path,
    fileName: file.name,
    fileSize: file.size,
    fileType: file.type,
  };
  const meta = await musicMetadata.parseBlob(file);
  // 过滤掉占空间的封面字段
  const { picture, ...restMeta } = meta.common
  return { ...fileContents, ...restMeta };
})

• 第三步：大数量场景分批提交
  如果单次上传的音频文件数量极多，调整上限后仍超出限制，可以将提交数组拆分为多个小批次，循环调用接口提交即可，避免单次请求体过大。

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