处理来自API的图像(仿制品)

问题描述 投票:1回答:1

我有一个问题(也许是问题)。当我尝试从端点获取图像时,我正在研究项目。端点响应具有正确的Image(但为二进制),我会将这个Blob转换为base64并将其显示在

此代码处理了请求(非常简单):

get: fileId => { return http.get(`/files/${fileId}`); },

这是包装授权令牌的方法。

响应是这样:

{duration: 497, problem: null, ok: true, status: 200, headers: {…}, …} config : {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …} data : "����↵�ExifMM*bj(1"r2��i���'�'Adobe Photoshop CC 2017 (Windows)2017:08:22 14:02:20����'�b"*(2 �HH����Adobe_CM��Adobed���� ↵ ��UG"����? ↵ ↵3!1AQa"q�2���B#$R�b34r��C%�S���cs5���&D�TdE£t6�U�e���u��F'���������������Vfv��������7GWgw��������5!1AQaq"2����B#�R��3$b�r��CScs4�%���&5��D�T�dEU6te����u��F���������������Vfv��������'7GWgw�������?����U�=ͪ������tn�?8��9`�b��GI'���sw ��.�����O��r����u���>�Un1�↵�c ��g�����\L3�|q���;]�+{l#������R���P�^��}v��+{,n��k����v����S�eY����K�uc�ı�m}_�U6?���g�����붃�1������wa�=՗����⟤u�Ա����0�n�0��.��?gI ��k�Y]�I↵������Vg�V�ʙE�v��~��k\���X�����v#�����`��k��U�2.��γ��x i{���:ϥ���'Vō���ZO���?�G�ܻO���U�a��.?�>�V�[D@�Ux��o�u����t��9�Kiv�� �9�����t��������U��en v����c��R� ���A�Wz�\5�vл%�}%��c��@8��m���}P��5�?����n=ud�ZC�ִLn�$��{��j?T�8?� 6c��E��N����w��$ےOX�����O�c��~F~3�k[cŌkZ�}��ӷ� �^���>�[�#D��i�(�Q��� ���� �����kƽ�<{������v�ͳ�ն�o��t�V&7��ߙ�o���ta��e��� kEv��z���O���P�S�󾉲���2n���?K��U���Pu���`t�|�uN��~�����W�Z��[F=tcQ�k]�s[u���ī�}lw�"����ӛ���A��-]a.t�y�vQ� [YmV㵬��1�kcsn ����n�E�↵�t���ŷ"�{*q�m���=�sVF?��T�O��ö���_��M�8�]H�c�i�u���;j����«�a�Է̧��)(�v���7��\?�T�۪���Uu��4���/���'�.t������T��t�X��Y�׹��%��OeC$��a��1f��/����W��1��� ��H���O�w��C?���1j���%����s������w�.�';�<����ݖ7�s-�ױ������e�Wz��oq94dn��.���_��s�춿�1fC���Rc�@����]�����-����h�2*x,�o�S��:���ʷ#�4b[�m�ꁙ��X�^ڪ�w=�7���Z�C�/M��������W=����:�z�^&K`����%��}���7��j�5l��Z�S�e��z�8��-��V2��K�ɺ?S��mYn�.�'�����T<]^�F�q3�Yϧm�����l�|�]U�ڱ�������%�eф-c+#IG�[߳�l��� :�I� �8$��Һ�.~;��<�K\���I6���������}Ρ��@������7Խ�@�kAq���:��G͘����̸r��!��ߺ���ϯ ����$~O�)�c< �4Y��"7ս�~��xsq.sk����t������*M�:GM�/� ��j����h�����̌��l�[���g��S�;��VFF=nv��e�����U�8��<&%8sc�KF���\���/v;�x ���=�8�W�5�Y�0_;���Գ�3����b��ޫ�32�od���O>��m�����a�~�O�GRD�͎�fYsQ�@����tn�~M��e�ٷ1�7!�E��ֿ� ���?�ͮǣuWd�c�6$�O"�k������������e�ݱ��ls�.��e��� �d��??�ܭJ �#�Ռ�6��Uk7��m��:�G�_�][�}%�^SM.���K`��[�%�/ó?�kǻ�ԃ}_Y��`@�9~���#�B�@Sh�$�W��������%u��mq��'n�a<�򿖢�Gi��Q�7 ?��y�I ��5�����}�n��������q1���]y�H�>�� ��"x��D�����:�$w�����_T����썰f>�G��)/+I.�������0Photoshop 3.08BIM%8BIM:printOutputPstSboolInteenumInteClrmprintSixteenBitboolprinterNameTEXTCanon iR1022i PCL6printProofSetupObjcNastaven� n�tisku↵proofSetupBltnenumbuiltinProof proofCMYK8BIM;-printOutputOptionsCptnboolClbrboolRgsMboolCrnCboolCntCboolLblsboolNgtvboolEmlDboolIntrboolBckgObjcRGBCRd doub@o�Grn doub@o�Bl doub@o�BrdTUntF#RltBld UntF#RltRsltUntF#Rlt@��↵vectorDataboolPgPsenumPgPsPgPCLeftUntF#RltTop UntF#RltScl UntF#Prc@YcropWhenPrintingboolcropRectBottomlongcropRectLeftlong cropRectRightlongcropRectToplong8BIM�+��+��8BIM&?�8BIM Z8BIM8BIM� 8BIM'↵8BIM�H/fflff/ff���2Z5-8BIM�p��������������������������������������������������������������������������������������������8BIM8BIM8BIM08BIM-8BIM@@8BIM8BIM?b'foto2'bnullboundsObjcRct1Top longLeftlongBtomlongbRghtlong'slicesVlLsObjcslicesliceIDlonggroupIDlongoriginenumESliceOrigin autoGeneratedTypeenum↵ESliceTypeImg boundsObjcRct1Top longLeftlongBtomlongbRghtlong'urlTEXTnullTEXTMsgeTEXTaltTagTEXTcellTextIsHTMLboolcellTextTEXT horzAlignenumESliceHorzAligndefault vertAlignenumESliceVertAligndefaultbgColorTypeenumESliceBGColorTypeNone topOutsetlong↵leftOutsetlongbottomOutsetlongrightOutsetlong8BIM(?�8BIM8BIM8BIM �GU�G� �����Adobe_CM��…y�$�'���駋�K5VL����D����$QP���'ߺx�zPm�3pbhqO����������J�Hb���Z��?�W�}}�2�_�[�Z���|VJ-�X3��EIO����)���()�y<q�=\Z�2�����;u W�N��Xt���\�- r�M�I��U��ə��ƘS�Z�:Ȗ�6iH,d���*��:1↵P���=%c��,o<�����H��C=d2�K2UD`��M��/�V9Z1�ּd�#��r�b �Vg1�"S־6�*j`��CO*��ʢ�b����2�a�N�U}j:ߌ��:��ỷT����Xژ�kr���ɔ�F�eX_�$5����%� 6p���-����u��9������o5���o �#)A�!�%�y�$�.M����cǵ�t�4�8�*z]�i2X�A&M�=r+)���%Cx=E��pYSW��@���q�:��Џ.��-�5[~�|�e*F$JP U�OKc�������5�:�M�[nQм���.GQ4��Q�=Qr��;�۴Q]QB��io~�U�H�g)^$�j3KP�gN���Yx�5vP�n8��3�&[$=↵�����eda��q�l�n"��ȥ$�(�i/��W�����8(G[惠���l��^Y�b�;��pa� L�'dʭ��;��}@�h N�UB3\tA�}���jY��T����ˍ����jYi��5OQ����$�=���N�����Zӣ��(��jAQ%E&3Q-=JG��� �X���;�� K��G�ވ�OOZ)W��Av;+K>V�S缕T�RJ�姉%��;PR��)�`H i�~=�)I����[h��NLn\�l�w����6���z�[��U������T↵�馦����\�k�d���\�JڊZ�B��de�Aq~��:I�{+rWe�����<�C-U�z_�+:Y��t�}?�ߺ������5��%�z������c��w��5T4���f��9���ͭ��R}�c]Js�|�����VSA�T�EYT(p��J��14�$2T#N�P�↵������]J��9� EԴ�um���dE}]Tyh�����')���k��[USR��@�[�~����=-��g�MH���Y[EWA�X�gDj����EI�b�4eॉ����H�V�)��a��̅5s�Z*q[�l�>DA��!5u<q�r�����'SG���׭u�gV�915K������R�Y%�xZ(ҍX�Wb��݇���P���~�5n�\�Ǥ­7�USO��ɚ\S4��"����U�ж�gh@�������J-�Y��Z����>=�MO+���c���V��鿵u��}1⚺�/&�Ud1iV�ϖ��(e��)�r|��򯑸↵܁a���Q׺!��9+�� 5M%]g�m���b�uUkΦ���Z��#��}{��Ff���}����j�\���+r2���Q��P��Y,��X{�t�6�ܙ��f��RTF��q5��pKLW�C2���9R↵�uE��:v�=k�z_n�pC�lu&v��|˅�M��v�UI ��c������8�Y[Q��zXq!2Ԕ9�0��a[��6^�T��e;�QCCH��9�Zh���G�~"��U�F����t�Ū�0d���5L�m�8�������0�K�T��K�(�K��Ѣ�jI�mf��a$�zx�f�y<���W?�U��el�{�K�<=$��)�#݂�����ZJly�WcsTu��SIU2�0GVjW�ʡ�#����n�lN�Z��mf?#E������0↵,��1U54��MYMP�B�H�%�ߛ{�F�01)�Mu��*'�R��bq�p�M�"�G����H�0c���O↵8$�0.p6M:v�ס��u5�O����)"ǭ�U@kb�����I=< N�d,A��~���IH{�����VÖ�Z *�WbѨ1��-QO�T/�6?��{�W��x���v�gf��c��� YIS� ��dq�pT�E�ȑ$��f��`,����`g+���6u����SY��U/خV����*YRc>�鱘C��X�hdH���BY�m���M�K�#%��z������� k�w&�m³<�kZ↵#y[D��K�c*�\{���E�AwWǓ��k�e�8�.�ݰ}�UD�X�q�J�U�e���Y�� !����ڙ��[�5$�e2;n�FF�MU<(�uk��!�k���O* ���=z_/�:l���4SaqY7���UYue\����á��������h���<��=�K�����8JU-�玶-�M.�#��?I�~���L�|t��{↵�wo�↵↵��S��xֶ����P�KR������ߩ^���viOJ����i�kb2QͶ( �/.)�b��J�Z��I_��T��Xܓ���a����k�d��x�Yy��-fjZ�h���↵����#���h��4�;0*��<�Ÿ�v���=<n�ã#��E�3>W.p�� �Y�#E��3��y�h�&�(YA�Ϩ���oew�J���5ҽ>n=ٳ��Pa2���OC���H�i<�����%:��؅↵����PP:h��"�3����d*(iij�2�媦�UD��C,�$��$�]DG�M�a���;��ylm6V,>媨H`�i�����>R�}� �:�i�B�Y!~X��WT9#�5�)���)��PU��A�@�T�U�Bw3>�mv�����]Į���6�����.f��'U��3�K����@Z1 �ur,>���ӱz� Qd�ҪS�>*��ejz�`+���,Q���Ӹ�S�"M��ߺ0�vh�E�rn�&��s����4��:*�uUe�)k̑ʦ�W��K٬�޺ ���=,�s� ۘ��ca��z���!�i1�b(�j�&q1�T��6���~��:jzZ��yZ̥Fch%��-�E[!EF��dCp��Qm��^�llNVL���;�LsS�5l4y���gT�P�k�����ҥnx��٫ڪ���й�����Y��NJZjz�ʊz��_4Q�n�P�(vev��_�4��iֺ[dbxpU��,���cނ�P5D�y��hy�<� <�oTLڿ�vIt�=h���@n���}�'�S����Yij��h��ԊAL�g��c�H�6��1����dH@���4�Bԙ�x�2�|�ɏ����U���R��4�0�]A��B�n��{��.1��Em��Ymϊ̜�:�)[���郮3ӊsO3�1����I`]�G���&Ԁ��)���m�v�Z�|| ��J��#U66%�e�i(!ɈVHic��= �U�6��[��d��↵�:*Q�����i$����7�zEgfFyىd� �<�����C8��Κ�#�72`3o���%GL��*���H)�u?c↵ֽL0�D�Yc(����I���+���J���#T��ϓSPƳ&j�I*��:=���A$�}�z+�H�:͎��cæ[���U��=+m��CGC�� h%d$1�ӧ�)s����,�S�h\a!�TEUQI����s��%�u��?R� W�\X��W3�S��m�vƪ�.!�s_G� P���K\>I��QI�↵U@_�� ��}�I$���������qU� :05T��e+*?�d(����↵�j���H�#h�R:���Yde7�{<{��(�v�`��K[�� ��X↵#��m%M��K���?�}��x���q�7fk5�gG��Y�M*�'�x��U�ѐ�~Ң�1Ƭ�mN-on��׼W���{���(j!���d)i���l�GJ?{� ���=W H�����R����zU�n\E5F��sR�e,�0�P��ri�%���'�↵↵e����"W�����Bv��D�8�S����r�j�<�>�S��jhy��id�d��~�B���s��<�O5�7��z�Կ�����7��?�$���_�!��������������{p��G�c�.c�����T��p���ڙ>#�t�ˣ9ؿ�d��>_�O������7��������O^�e��I<���_�3�-��������_������][�y���q�����h���?��������� ��N�;��Pv����[�ŷ�/��?�#��?���[ݓ���������O����:������1'�↵�i��}����[�Ǥ����(��[���������_gi�=y8�tn>>�Ǖ���_�n��}��k���'�5����������������v���?���?��'�~�t4e?�����g�[j����ǿ���{�;�=:��?�������-��d�_����/��:��\���}yo�����&����O�tKu���eņo��↵��-�o�/� ����������������-�X�_������L����=���|'�Ob����O�A������������tS7�z0ۛ�<��5��O���ŏ�W�/�g�S��o~鮂������[?����?������G���������t ���������t_�q����.�����?��[�����.�У���ߺ?�������Z��������C/�z�@����iK�������[�-�5�W����j�������п�?�]�������/����������>?.�x<u��������� �3�i������?�����ˏT���������p��������o����{;��5��ǣ#���o1�c��C�.��f������M�ڵ�w�t^��͋�1���-�����������}�7�Ӱ�] �ū ����E�_�������?��L����Ϥ^����������\�B����?�o����?�n�-���������?�O���G�_����{�L�����?�������?�O�_��~�>�և�����G�Z���C�?��������ߺ�A�G�|y?����������?��͏�?�kߺ����kK�3O�k�.5��������?���o�硲������e���s�T���������Aǯ~Ε����*���ڿ���o�7�X�����c��~ǯ~΃���?�}��u���G���&_��L���֟v^-�|�B������|��S+�?�����o��WO���7�^ۗ��7^���" duration : 497 headers : {pragma: "no-cache", content-type: "image/jpeg", cache-control: "no-cache, no-store, must-revalidate", expires: "0"} ok : true problem : null status : 200 __proto__ : Object

我试图像这样将其转换为base64: btoa(unescape(encodeURIComponent(photo.data))) 这段代码没有给我正确的base64以显示Image。您能帮助我如何正确地将此响应转换为base64或如何以其他方式显示图像?

javascript image reactjs api blob
1个回答
1
投票

我知道这很旧,也许您已经解决了这个问题,但是我遇到了类似的问题,才发现了。

对我来说,解决方案是在apisauce.create方法中指定responseType。

api = apisauce.create({
    baseURL,
    responseType: 'arraybuffer',
    timeout: 45000
  })

对于二进制数据,arraybuffer或blob应该可以。然后,您可以将数据转换为base64

© www.soinside.com 2019 - 2024. All rights reserved.