使用指定Gist代码录制音频后，Blob URL转上传/邮件发送需求咨询

我明白你现在的困境——用那套音频录制代码能正常生成WMV文件供下载，但没法直接把Blob资源整合到上传脚本或者邮件发送流程里。下面我分两种场景给你具体的解决方案：

首先，你手里的Blob URL没法直接上传，得先把它转换成实际的Blob对象，然后通过FormData提交到后端。

步骤1：从Blob URL获取Blob对象 #

你可以用fetch来请求这个URL，拿到Blob：

async function getBlobFromUrl(blobUrl) {
  const response = await fetch(blobUrl);
  const blob = await response.blob();
  return blob;
}

步骤2：构建FormData并上传 #

拿到Blob后，就可以把它加到FormData里，用fetch发送到你的后端接口：

async function uploadRecording(blobUrl) {
  const blob = await getBlobFromUrl(blobUrl);
  const formData = new FormData();
  // 给文件命名，这里可以自定义，比如recording.wmv
  formData.append('audio_recording', blob, 'recording.wmv');

  // 发送请求到你的上传接口，比如/upload.php
  const response = await fetch('/upload.php', {
    method: 'POST',
    body: formData
  });

  if (response.ok) {
    console.log('上传成功！');
    // 这里可以处理上传后的逻辑，比如跳转提示页面
  } else {
    console.error('上传失败');
  }
}

后端（PHP）接收示例 #

如果你的后端是PHP，upload.php可以这么写来保存文件：

<?php
if ($_FILES['audio_recording']['error'] === UPLOAD_ERR_OK) {
  $targetDir = 'uploads/';
  $targetFile = $targetDir . basename($_FILES['audio_recording']['name']);
  
  // 确保uploads目录存在
  if (!file_exists($targetDir)) {
    mkdir($targetDir, 0777, true);
  }
  
  if (move_uploaded_file($_FILES['audio_recording']['tmp_name'], $targetFile)) {
    echo "文件已成功保存到: " . $targetFile;
  } else {
    echo "保存文件时出错";
  }
} else {
  echo "上传出错，错误码: " . $_FILES['audio_recording']['error'];
}
?>

PHP的mail()函数没法直接发送Blob，得先把Blob转换成base64编码，然后构建带附件的MIME邮件内容。

步骤1：前端把Blob转成base64 #

在前端把Blob转成base64字符串，然后传给后端：

async function blobToBase64(blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result.split(',')[1]); // 去掉dataURL前缀
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}

async function sendRecordingByEmail(blobUrl, recipientEmail) {
  const blob = await getBlobFromUrl(blobUrl);
  const base64Audio = await blobToBase64(blob);
  
  // 发送到后端邮件接口
  const response = await fetch('/send-audio-email.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `recording=${encodeURIComponent(base64Audio)}&to=${encodeURIComponent(recipientEmail)}`
  });

  if (response.ok) {
    console.log('邮件发送成功！');
  } else {
    console.error('邮件发送失败');
  }
}

后端（PHP）处理邮件发送 #

send-audio-email.php的示例代码，构建带附件的邮件：

<?php
$recipient = $_POST['to'];
$base64Audio = $_POST['recording'];
$fileName = 'recording.wmv';
$fileType = 'video/x-ms-wmv'; // WMV的MIME类型

// 邮件基本信息
$subject = '录制的音频文件';
$message = '这是您录制的音频附件';

// 构建MIME边界
$boundary = md5(time());

// 邮件头
$headers = "From: your-email@example.com\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: multipart/mixed; boundary=\"{$boundary}\"\r\n";
$headers .= "X-Mailer: PHP/" . phpversion();

// 邮件内容
$body = "--{$boundary}\r\n";
$body .= "Content-Type: text/plain; charset=UTF-8\r\n";
$body .= "Content-Transfer-Encoding: 7bit\r\n\r\n";
$body .= $message . "\r\n\r\n";

// 附件部分
$body .= "--{$boundary}\r\n";
$body .= "Content-Type: {$fileType}; name=\"{$fileName}\"\r\n";
$body .= "Content-Disposition: attachment; filename=\"{$fileName}\"\r\n";
$body .= "Content-Transfer-Encoding: base64\r\n\r\n";
$body .= chunk_split($base64Audio) . "\r\n";
$body .= "--{$boundary}--";

// 发送邮件
if (mail($recipient, $subject, $body, $headers)) {
  echo "邮件发送成功";
} else {
  echo "邮件发送失败";
}
?>

注意事项 #

• 如果你在localhost测试邮件发送，可能需要配置PHP的php.ini里的SMTP参数，或者用第三方邮件工具类来避免发送失败。
• 大文件的话，base64会增加约33%的体积，如果录制的音频文件很大，优先用上传脚本的方案，再通过邮件发送文件链接会更高效。

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