为什么我用laravel框架的Storage::get(xxx);输出的文件流,前端无法显示?

我使用了两种方法:

·方法一

<img src="/接口路径" />

此方法可行,图片能显示出来!!

·方法二

<img id=”image”/>
<script>

$.ajax({ 
 type : "XXX",
 url : "/接口路径",
 data : { 
     //一些数据
 },
 success : function(result) {
     //将接口结果(文件流)赋值到img标签的src上
     document.getElementById('image').src=result.data;
 } 
});

</script>

此方法不可行,图片显示不出来!!

请问,方法二的图片为什么无法显示?感觉有时候方法二很有必要,比如有时候需要在请求接口时传入一些header信息。

【注】图片的文件流信息为下图所示:

clipboard.png

回答:

三种方法

  1. 直接把src写成接口地址
  2. 使用ajax请求数据,返回来之后使用Blob包装,然后把src写成blob地址
  3. 后端把图片base64编码输出为文本形式,ajax请求回来这个文本,src写成data:image/jpeg;base64,后端base64数据

回答:

如果result.data是图片二进制数据,应该将图片二进制数据base64编码,前面加图片类型,参考:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABd4AAAEjCAMAAAAbleO0AAAABGdBTUEAAL…………" />

回答:

document.getElementById('image').src='/接口路径';

如果接口是直接返回二进制的,只能这样设置
或者编码成base64

$.ajax({
    url:'',
    dataType:'text',
    success:function(string){
        document.getElementById('image').src='data:image/png;base64,'+window.btoa(string);
    }
})

=====
试了下,btoa只支持普通编码的字符串,所以这个方法要换个思路,如果获取的string没问题,那就是想办法转换成blob暂时没测试成功。所以还是在服务端编码base64输出过来,比较稳妥。 不过base64数据量比普通的二进制会大好多。

回答:

Storage::get()我记得这个好像是读取内容,返回的貌似不是二进制数据。
你可以用Storage::readStream(path)这个试试,返回的是resource类型

刚刚查了一下$.ajax资料,貌似是这玩意并不支持数据流,只支持json,text,xml等格式 。。。。。。

回答:

都说错了。。你返回的确实是二进制数据。而不是 base64 你这种 ajax 请求的文件流,需要用到前端的 blob 对象来接收处理。然后转成你需要的格式(如base64)

var typedArray = GetTheTypedArraySomehow();
var blob = new Blob([typedArray], {type: "application/octet-binary"});// 传入一个合适的MIME类型
var url = URL.createObjectURL(blob);
// 会产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串
// 你可以像使用一个普通URL那样使用它,比如用在img.src上。

具体参考:Blob 对象

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注