前端使用blob展示二进制的图片

本文介绍了如何使用JavaScript的Ajax技术通过 XMLHttpRequest 获取远程服务器的二进制数据,并利用Blob对象进行本地展示。重点在于展示了如何设置响应类型为blob,并在接收到数据后正确解析和应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

//DOM
var img = document.getElementById('img')
//Ajax
var xhr = new XMLHttpRequest()
// 设置返回类型为blob
xhr.responseType = "blob";
xhr.addEventListener('load',() => {
console.log(xhr.response);
var blob = xhr.response
// 给img赋值
img.src = window.URL.createObjectURL(blob)
})
//ajax的请求地址 方法
xhr.open('get','http://127.0.0.1:3000/v1/get/img',true)
xhr.send(null)

  请求返回二进制数据

<think>好的,我现在需要帮助用户解决在FastAdmin中处理Blob类型的二进制图片数据的问题。首先,用户提到了Blob图片处理,所以我应该回忆一下FastAdmin的常用方法以及PHP处理Blob数据的方式。 首先,FastAdmin是基于ThinkPHP的框架,通常处理图片上传和存储会用到模型和控制器中的方法。用户提到的是Blob类型的二进制数据,这可能意味着图片是以二进制形式存储在数据库中的,而不是保存为文件路径。这种情况下,如何在前端显示和存储是关键。 然后,我需要考虑用户可能的应用场景。比如,用户可能从表单上传图片,后端接收后转换为Blob存入数据库,或者从数据库读取Blob并输出为图片。因此,我需要分步骤考虑上传和显示两部分。 接下来,处理上传部分。在FastAdmin中,通常会使用addAuto方法来处理模型数据。用户上传的图片文件,通过PHP的file_get_contents函数读取为二进制数据,然后保存到数据库的Blob字段中。这里需要注意文件上传的验证,比如大小、类型等,以及可能的错误处理。 然后是显示部分。当需要从数据库读取Blob并显示为图片时,可能需要创建一个控制器方法,设置正确的Content-Type头,例如image/jpeg,然后直接输出二进制数据。前端使用<img>标签的src指向这个控制器的方法,就能显示图片了。 另外,用户可能还需要考虑性能问题,比如直接将图片存储在数据库可能会影响性能,通常建议存储文件路径,但如果有特殊需求必须用Blob,那就按上述方法处理。同时,上传文件的大小限制需要在PHP配置中调整,比如post_max_size和upload_max_filesize,确保大文件可以上传。 还要检查用户是否在数据库中正确设置了Blob类型的字段,比如使用LONGBLOB来存储较大的图片数据。这可能会影响数据库的设计和优化。 最后,生成相关问题,帮助用户进一步了解相关主题,比如如何优化Blob存储的性能,或者如何在前端处理二进制数据下载等。这些问题需要与当前问题相关,但又不重复,能够引导用户深入理解。</think>在FastAdmin中处理Blob类型的二进制图片数据,可通过以下步骤实现: ### 一、数据库存储 1. 创建数据库字段时使用`LONGBLOB`类型,支持最大4GB的二进制数据存储 2. 使用TP框架的模型自动完成机制: ```php // 模型层 class Image extends Model { protected $type = [ 'image_data' => 'json' // 自动序列化二进制数据 ]; } ``` ### 二、文件上传处理 ```php // 控制器 public function upload() { $file = request()->file('image'); $blobData = file_get_contents($file->getRealPath()); // 获取二进制数据 $model = new Image(); $model->save([ 'filename' => $file->getOriginalName(), 'image_data' => base64_encode($blobData) // 建议base64编码存储[^4] ]); return json(['status' => 'success']); } ``` ### 三、图片输出显示 ```php // 创建专门显示图片的路由 public function showImage($id) { $image = Image::find($id); header('Content-Type: image/jpeg'); // 根据实际类型设置 echo base64_decode($image['image_data']); exit; } ``` ### 四、前端调用示例 ```html <img src="/index.php/image/showImage/id/1" alt="blob-image"> ``` ### 注意事项: 1. 需在php.ini中调整配置: ```ini post_max_size = 20M upload_max_filesize = 20M ``` 2. 建议对大文件进行分片上传处理 3. 数据库连接需使用`PDO::ATTR_STRINGIFY_FETCHES => false`配置防止二进制数据转换
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值