在前端开发中，我们常常需要动态生成文件内容并将文件上传到服务器，Blob对象可以帮我们实现前端文件内容的动态创建，再配合PHP后端就能完成完整的上传流程。下面我们来一步步实现这个功能。
什么是Blob对象
Blob是Binary Large Object的缩写，代表不可变的原始数据类文件对象，它可以存储大量二进制数据，也可以存储文本数据。在前端中，我们可以通过构造函数直接创建Blob实例，用来生成需要上传的文件内容。
使用JavaScript创建Blob文件
创建Blob对象非常简单，只需要传入数据和可选的配置项即可。下面是一个生成文本类型Blob的示例：
// 要生成文件的内容
const fileContent = '这是通过JavaScript动态生成的文件内容';
// 创建Blob对象，指定类型为纯文本
const blob = new Blob([fileContent], { type: 'text/plain' });
// 可以查看生成的Blob信息
console.log('Blob大小:', blob.size);
console.log('Blob类型:', blob.type);
如果需要生成其他类型的文件，只需要修改传入的内容和type属性即可，比如生成JSON文件可以将type设置为application/json，内容传入JSON字符串。
前端上传Blob到PHP服务器
创建好Blob之后，我们需要通过FormData将其封装成表单数据，再使用fetch或者XMLHttpRequest发送到后端。下面是完整的上传示例代码：
// 创建Blob对象
const content = '测试上传的文本内容';
const blobFile = new Blob([content], { type: 'text/plain' });
// 创建FormData对象，添加文件和其他参数
const formData = new FormData();
// 第一个参数是后端接收的文件字段名，第二个是Blob对象，第三个是文件名
formData.append('upload_file', blobFile, 'test.txt');
formData.append('user_id', '1001'); // 可以附加其他参数
// 发送上传请求
fetch('upload.php', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(result => {
console.log('上传结果:', result);
})
.catch(error => {
console.error('上传失败:', error);
});
PHP后端接收并保存文件
PHP端可以通过$_FILES超全局变量接收上传的文件，然后将其移动到指定的服务器目录。下面是upload.php的实现代码：
<?php
// 检查是否有文件上传
if (!isset($_FILES['upload_file'])) {
echo '未检测到上传文件';
exit;
}
$uploadFile = $_FILES['upload_file'];
// 上传目录，需要确保目录有写入权限
$uploadDir = './uploads/';
// 如果目录不存在则创建
if (!is_dir($uploadDir)) {
mkdir($uploadDir, 0777, true);
}
// 生成唯一的文件名，避免重名覆盖
$fileName = uniqid() . '_' . $uploadFile['name'];
$targetPath = $uploadDir . $fileName;
// 移动上传的临时文件到目标路径
if (move_uploaded_file($uploadFile['tmp_name'], $targetPath)) {
// 可以获取前端传递的其他参数
$userId = $_POST['user_id'] ?? '';
echo '文件上传成功，保存路径：' . $targetPath . '，用户ID：' . $userId;
} else {
echo '文件上传失败，错误码：' . $uploadFile['error'];
}
?>
注意事项
- 前端创建Blob时，type属性要和文件实际内容匹配，避免后端解析错误
- PHP的上传目录需要设置正确的写入权限，否则会导致文件保存失败
- 生产环境中需要对上传的文件做类型校验、大小限制，避免恶意文件上传
- 如果上传大文件，需要调整PHP的
upload_max_filesize和post_max_size配置
常见问题排查
如果上传失败，可以先检查前端的请求是否成功发送，查看Network面板中的请求参数是否正确。如果前端请求正常，再检查PHP的错误日志，确认是否是目录权限或者配置问题导致的保存失败。
JavaScriptBlobPHP文件上传修改时间：2026-06-09 20:36:26