如何用JavaScript发送Blob到PHP存为服务器文件？Three.js导出STL求助

嘿，我来帮你搞定这两个技术难题！咱们一个个来解决：

一、JavaScript发送Blob到PHP并保存为服务器文件 #

这部分的核心是利用FormData封装Blob数据，通过AJAX（推荐用fetch）发送到PHP后端，再由PHP处理保存。

前端JS代码示例 #

// 封装一个通用的Blob上传函数
function uploadBlobToServer(blob, filename) {
  const formData = new FormData();
  // 把Blob附加到FormData，第一个参数是表单字段名，PHP会通过这个名称获取数据
  formData.append('uploaded_file', blob, filename);

  fetch('save_file.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.text())
  .then(result => {
    console.log('上传成功！服务器返回：', result);
  })
  .catch(error => {
    console.error('上传出错：', error);
  });
}

后端PHP代码（save_file.php） #

<?php
// 检查是否接收到上传文件
if(isset($_FILES['uploaded_file'])) {
  $file = $_FILES['uploaded_file'];
  
  // 检查上传是否有错误
  if($file['error'] !== UPLOAD_ERR_OK) {
    die('上传错误：' . $file['error']);
  }
  
  // 设置保存路径（务必确保服务器的uploads目录存在且有写入权限！）
  $saveDir = './uploads/';
  if(!is_dir($saveDir)) mkdir($saveDir, 0755, true);
  $savePath = $saveDir . basename($file['name']);
  
  // 移动临时文件到目标路径
  if(move_uploaded_file($file['tmp_name'], $savePath)) {
    echo '文件已保存到：' . $savePath;
  } else {
    die('无法保存文件，请检查目录权限');
  }
} else {
  die('未接收到上传文件');
}
?>

注意事项：

• 用chmod 755 uploads给服务器目录设置合适的写入权限
• 检查PHP配置文件php.ini中的upload_max_filesize和post_max_size，如果STL文件较大，需要适当调大这两个值

二、Three.js导出二进制STL并上传到服务器 #

你提到用Filesaver.js能正常下载，但上传出问题，大概率是FormData封装数据时的问题——比如误用了dataURL，或者没正确处理STLBinaryExporter的导出结果。

修正后的前端导出&上传代码 #

function exportSTL() {
  // 初始化二进制STL导出器
  const exporter = new THREE.STLBinaryExporter();
  // 导出场景中的几何体（这里假设你的场景对象是sceneEx，根据实际情况调整）
  const stlArrayBuffer = exporter.parse(sceneEx);
  
  // 将ArrayBuffer转成Blob，STL的MIME类型用"application/sla"或"model/stl"都可以
  const stlBlob = new Blob([stlArrayBuffer], { type: 'application/sla' });
  
  // 调用上面的通用上传函数
  uploadBlobToServer(stlBlob, 'exported_model.stl');
  
  // 如果你还需要本地下载，保留Filesaver的代码完全没问题
  // saveAs(stlBlob, 'exported_model.stl');
}

关键要点 #

• STLBinaryExporter.parse()返回的是ArrayBuffer，必须转成Blob才能通过FormData正确上传，不要用dataURL转Blob（会增加体积且容易出错）
• 不需要在FormData里同时附加dataURL和Blob，只传Blob就足够，PHP端直接通过$_FILES接收即可
• 测试时可以在浏览器开发者工具的Network标签里查看请求，确认FormData是否正确包含了文件数据

如果还是遇到问题，可以排查这些点：

• 浏览器控制台是否有报错信息
• 在PHP端打印var_dump($_FILES)，确认是否接收到文件以及错误码
• 再次确认服务器目录权限和PHP上传配置

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