如何从URL获取.wav文件Blob以实现同站音频跨Schema复制？

错误原因 #

你遇到的报错是因为fetch()返回的是一个Promise对象，而非直接的Blob实例。直接将这个Promise传给FormData.append()时，方法会因为参数类型不匹配而抛出错误。

解决方法 #

需要等待fetch的异步操作完成，拿到真实的Blob后再构建FormData并上传。以下提供两种可行的实现方式：

方式1：使用async/await（推荐，代码更易读） #

async function copyAudioFiles() {
  // 用for...of替代forEach，支持异步顺序执行
  for (const item of newwavfiles) {
    const filename = item["filename"];
    
    // 等待fetch请求完成，获取Blob
    const res = await fetch('https://mywebsite.nl/media/audiofiles/12345677/recording.wav');
    // 检查请求是否成功
    if (!res.ok) {
      console.error(`获取音频失败: ${res.status}`);
      continue;
    }
    const fileBlob = await res.blob();

    // 构建FormData
    const formData = new FormData();
    formData.append('file', fileBlob, filename);
    formData.append('guid', guid);

    // 上传文件
    try {
      const response = await $.ajax({
        url: 'index.php?action=uploadAudiofile',
        type: 'post',
        data: formData,
        enctype: 'multipart/form-data',
        contentType: false,
        processData: false
      });
      console.log(`音频 ${filename} 复制成功`, response);
    } catch (xhr) {
      const errorMsg = `${xhr.status}: ${xhr.statusText}`;
      console.error(`音频 ${filename} 复制失败`, errorMsg);
    }
  }
}

// 执行复制操作
copyAudioFiles();

方式2：使用Promise链式调用 #

newwavfiles.forEach(item => {
  const filename = item["filename"];

  fetch('https://mywebsite.nl/media/audiofiles/12345677/recording.wav')
    .then(res => {
      if (!res.ok) throw new Error(`请求失败: ${res.status}`);
      return res.blob();
    })
    .then(fileBlob => {
      const formData = new FormData();
      formData.append('file', fileBlob, filename);
      formData.append('guid', guid);
      
      return $.ajax({
        url: 'index.php?action=uploadAudiofile',
        type: 'post',
        data: formData,
        enctype: 'multipart/form-data',
        contentType: false,
        processData: false
      });
    })
    .then(response => {
      console.log(`音频 ${filename} 复制成功`, response);
    })
    .catch(error => {
      console.error(`音频 ${filename} 复制失败`, error.message || `${error.status}: ${error.statusText}`);
    });
});

关键注意点 #

• 异步等待：必须确保fetch完成并拿到Blob后，再执行FormData构建和上传操作
• 状态检查：添加res.ok判断，避免处理失败的HTTP响应（比如404、500错误）
• 并发控制：如果需要控制上传顺序，推荐使用for...of+async/await；如果允许并发上传，forEach+Promise链式调用也可，但需注意服务器压力

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