使用axios上传视频到Bunny Stream返回400错误如何解决

你收到400报错的核心原因有三个：

• 接口规则搞混了：你参考的base64上传要求是Bunny对象存储（Storage Zone）的接口规范，和Bunny Stream视频服务无关。Stream的视频上传接口不需要做base64转换，直接传原始文件二进制流即可。
• 异步逻辑有问题：你写的toBase64是异步方法，但调用Main()后没有等待执行完成就发起上传请求，实际触发上传时video变量还是未定义状态。
• 请求头配置错误：PUT上传请求没有设置正确的Content-Type，错误传入的超长字符串被服务端识别为表单键名解析，触发了2048字符的键长度限制，才返回对应的报错信息。

直接放弃base64转换逻辑，修正异步流程，用原始File对象作为上传数据即可，可直接用下面的代码：

async function UploadVideo(e){
  const file = e.target.files[0];
  if (!file) return;

  // 第一步：在Stream库中创建视频条目
  const createOptions = {
    method: 'POST',
    url: 'https://video.bunnycdn.com/library/替换为你的视频库ID/videos',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      AccessKey: '替换为你的API访问密钥'
    },
    data: {
      title: file.name // 可自定义视频标题，这里默认用原文件名
    }
  };

  try {
    const createRes = await axios.request(createOptions);
    const videoGuid = createRes.data.guid;

    // 第二步：上传原始视频文件
    const uploadOptions = {
      method: 'PUT',
      url: `https://video.bunnycdn.com/library/替换为你的视频库ID/videos/${videoGuid}`,
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/octet-stream',
        AccessKey: '替换为你的API访问密钥'
      },
      data: file, // 直接传入File对象，axios会自动处理为二进制流
      // 如需展示上传进度可开启以下配置
      onUploadProgress: (progressEvent) => {
        const uploadPercent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        console.log(`当前上传进度：${uploadPercent}%`);
      }
    };

    const uploadRes = await axios.request(uploadOptions);
    console.log('视频上传完成', uploadRes.data);
    // 后续将视频信息同步到PHP后端的逻辑写在这里即可

  } catch (error) {
    console.error('上传失败：', error.response?.data || error.message);
  }
}

• 禁止对大体积视频做base64转换：base64编码会让文件体积增大约33%，既拖慢上传速度，还可能导致浏览器内存占用过高出现卡顿。
• 如果单个视频大小超过128MB，不要使用单文件PUT上传，建议改用Tus断点续传方案，避免网络波动导致整个上传过程从头重试。
• 前端代码中直接写入AccessKey会有严重的安全风险，生产环境建议把创建视频、签名校验的逻辑放到后端，前端仅通过临时凭证上传，避免密钥泄露被恶意调用。

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