如何在我的React前端中转换从S3存储桶检索到的流以用作jpeg图像？

编程问答 2022-06-05

问题描述

我有一个非常具体的问题，似乎可以在整个互联网上得到解决，但是我现在已经花了2天的时间来解决它，但是不幸的是我无法解决。这是我的问题：

  • 我在私有S3存储桶中有许多jpeg文件。我想将其保密，并将这些文件提供给我的React前端，因此，签名的url不是一个选择，而公开存储桶也不是一个选择。

  • 我有一个node.js / express后端。我使用AWS开发工具包的功能getobject（）设置了从S3存储桶检索jpeg文件的路由。没问题，设置的这一部分工作正常，因此无需深入研究这一部分。

  • 然后我从我的React前端使用Axios调用此路由。然后我得到一个返回的对象，问题开始了。我收到的对象看起来像这样：

����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')
    })
amazon-s3axiosaxiosaxioshtmljpegreactjsreactjsreactjsreactjs