如何将ObjectURL转换为可插入数据库的BLOB并解决PHP处理报错

blob URL（格式为blob:http://xxx）是浏览器为本地内存/缓存中的文件资源生成的临时会话级地址，仅在当前浏览器页面/会话的上下文内有效，服务端PHP无法直接通过网络访问该地址，因此调用file_get_contents()读取时会抛出文件/流不存在的错误。

注意：绝对不要直接将blob URL作为参数传给服务端处理，该地址脱离浏览器上下文后完全无效，没有任何解析价值。

前端预处理（必须做） #

你需要在前端先把生成blob URL对应的原始Blob对象做转换，再传给后端，两种常用方案：

• 方案1：小体积图片可直接转base64字符串提交

// blob为生成ObjectURL对应的原始Blob对象
const fileReader = new FileReader();
fileReader.readAsDataURL(blob);
fileReader.onload = () => {
  const imgBase64 = fileReader.result;
  // 将imgBase64通过POST请求传给PHP后端即可
};

• 方案2：大体积图片用FormData封装为文件上传，性能更高

const formData = new FormData();
// 第三个参数可自定义上传的文件名
formData.append('image_file', blob, 'upload.png');
// 发送请求时不要手动设置Content-Type，让浏览器自动识别带boundary的请求头
fetch('你的PHP接口地址', {
  method: 'POST',
  body: formData
});

后端PHP对应处理 #

对应前端传base64的场景 #

无需调用file_get_contents，直接接收后按需处理即可：

// 接收前端POST传递的base64字符串
$base64Content = $_POST['img_base64'];
// 去掉base64头部标识，如需直接存base64可跳过此步
$pureBase64 = preg_replace('/^data:image\/[a-z]+;base64,/', '', $base64Content);
// 转成文件内容写入本地
$fileContent = base64_decode($pureBase64);
file_put_contents('./storage/test.png', $fileContent);

对应前端FormData传文件的场景 #

走常规文件上传逻辑即可，需要转base64再读取临时文件：

$uploadFile = $_FILES['image_file'];
if ($uploadFile['error'] === UPLOAD_ERR_OK) {
    // 直接转base64
    $imgBase64 = base64_encode(file_get_contents($uploadFile['tmp_name']));
    // 如需存文件则移动临时文件
    move_uploaded_file($uploadFile['tmp_name'], './storage/test.png');
}

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