如何将本地blob图片URL通过JavaScript上传到PHP并获取为File文件

本地blob格式图片URL（示例：blob:http://localhost/1d795687-b478-4edf-9b3d-8dda768b9d9f）需要通过JS获取为File文件后上传到PHP，对应的网络请求面板参考如下图：

1. 前端将blob URL转为File对象 #

通过fetch请求blob地址获取Blob实例后，即可转为标准File对象：

async function blobUrlToFile(blobUrl, fileName = 'upload-image.png') {
  const response = await fetch(blobUrl);
  const blob = await response.blob();
  // 第三个参数可按需自定义MIME类型
  return new File([blob], fileName, { type: blob.type });
}

2. 前端上传File到PHP接口 #

使用FormData封装文件后发送POST请求即可：

async function uploadImage() {
  // 替换为你的实际blob地址
  const blobUrl = 'blob:http://localhost/1d795687-b478-4edf-9b3d-8dda768b9d9f';
  const uploadFile = await blobUrlToFile(blobUrl, 'custom-image.png');
  
  const formData = new FormData();
  formData.append('upload_file', uploadFile);
  
  // 替换为你的PHP上传接口地址
  const res = await fetch('/upload.php', {
    method: 'POST',
    body: formData
  });
  const result = await res.json();
  console.log('上传结果', result);
}

3. 后端PHP接收处理示例 #

<?php
// 自定义文件存储目录，需确保目录有写入权限
$saveDir = './upload/';
if (!file_exists($saveDir)) {
    mkdir($saveDir, 0755, true);
}

$uploadFile = $_FILES['upload_file'];
if ($uploadFile['error'] === UPLOAD_ERR_OK) {
    $savePath = $saveDir . basename($uploadFile['name']);
    if (move_uploaded_file($uploadFile['tmp_name'], $savePath)) {
        echo json_encode([
            'code' => 0,
            'msg' => '上传成功',
            'save_path' => $savePath
        ]);
    } else {
        echo json_encode(['code' => 1, 'msg' => '文件保存失败']);
    }
} else {
    echo json_encode(['code' => 1, 'msg' => '上传失败，错误码：' . $uploadFile['error']]);
}
?>

• blob URL仅在生成它的当前页面上下文生效，页面刷新、跨标签页/iframe调用都会失效，必须在生成blob URL的同页面内完成转换和上传操作
• 若blob URL跨域，需要对应服务端配置CORS规则允许当前域名请求，否则fetch会触发跨域报错
• 生产环境使用时建议在PHP端增加文件大小、格式、安全校验，避免上传恶意文件

内容的提问来源于stack exchange，提问作者Vinícius