如何解决如何在我的React前端中转换从S3存储桶检索到的流以用作jpeg图像?
我有一个非常具体的问题,似乎可以在整个互联网上得到解决,但是我现在已经花了2天的时间来解决它,但是不幸的是我无法解决。这是我的问题:
-
我在私有S3存储桶中有许多jpeg文件。我想将其保密,并将这些文件提供给我的React前端,因此,签名的url不是一个选择,而公开存储桶也不是一个选择。
-
我有一个node.js / express后端。我使用AWS开发工具包的功能getobject()设置了从S3存储桶检索jpeg文件的路由。没问题,设置的这一部分工作正常,因此无需深入研究这一部分。
����JFIF��。
。!!。)1(%(1)I9339ITGCGTf [[f�z����
。!!。)1(%(1)I9339ITGCGTf [[f�z������Jp“�����z��Rբ���@ BD。” I $�mU�UR �D$�I$趭�UZR���/S�g0�BDI$�t[V��JQ@�����ז9��y��^�DD''$�$。 ����T))@(�;����0�k�����@@AHDH�����Uj��������&l�����...!'' UjUBU�q%n.e. /ߠ��!“H�N�V��JP(?zL�� �uc�=���(A!''Io��Z�)J(�〜7�u��z�������。] \z5x���}��DI $����TP(?�7O��f��ٷ��������
等等,字符串显然更长
从网上阅读的所有内容看,我似乎都明白这是一个流,并且为了在我的React前端中显示为jpeg图像,需要将其转换为Base64,并且此转换的结果需要用作。这个对吗?我已经尝试了各种解决方案来解决此问题,但是没有一个有效。这是我尝试过的一个示例,与我在网上看到的所有其他解决方案非常相似,但没有一个起作用:
let buf = Buffer.from(rsp.data)
let base64 = buf.toString('base64')
let convImage = <img src={`data:image/*;base64,${rsp.data}`} alt='' />
// And then render convImage
我花了很多时间尝试解决这个问题,这看起来像是一个简单的问题,但是我无法弄清楚。我将不胜感激,帮助我完成自己想做的事情。问题:
-
我上面的示例是否应该起作用,为什么不起作用?我在做什么错,我不了解什么?
-
我误解了这些概念,我应该以不同的方式来做吗?
谢谢
解决方法
我终于自己解决了这个问题。该解决方案的方向与我在网上看到的大多数建议都不同,我在以下URL中找到了它: https://simplernerd.com/js-image-binary-jfif/
我将这些行添加到了代码中,通过Axios收到的响应现在可以像在React前端中那样显示:
axiosClient.get(route,{responseType: 'blob',params}) // had to add responseType to the axios config
.then((rsp) => {
const url = URL.createObjectURL(rsp.data) // where rsp is the response
var image = <img src={url} alt='' /> // <img/> can now use the url object to display the image,and var image can now be rendered by React
}
.catch((err) => {
console.log('Error receiving rsp')
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。