Как отобразить ответ потокового изображения в реакции как изображение? - PullRequest
0 голосов
/ 07 мая 2020

Я использую стек mern для создания приложения. Я отправляю изображение в виде потока из express в качестве ответа. Фрагмент, который я использую для отправки изображения в виде потока, выглядит примерно так:

const fs = require('fs')
const stream = require('stream')

app.get('path',(req, res) => {
  const r = fs.createReadStream('path to file') // or any other way to get a readable stream
  const ps = new stream.PassThrough() // <---- this makes a trick with stream error handling
  stream.pipeline(
   r,
   ps, // <---- this makes a trick with stream error handling
   (err) => {
    if (err) {
      console.log(err) // No such file or any other kind of error
      return res.sendStatus(400); 
    }
  })
  ps.pipe(res) // <---- this makes a trick with stream error handling
});

В ответ я получаю его с помощью ax ios. Фрагмент выглядит примерно так:

 url = "route or path here";
                    axios.get(url)
                        .then(res => {
                            console.log(res.data);
                            console.log(typeof (res.data));
                        }).catch((err) => {
                            console.log(err);
                        }); 

Я получаю gibbri sh в качестве ответа, который я совершенно не могу интерпретировать. Его тип - строка. Это выглядит примерно так:

����ExifII*��DuckyP��/http://ns.adobe.com/xap/1.0/<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c145 79.163499, 2018/08/13-16:40:22        "> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#" xmp:CreatorTool="Adobe Photoshop CC 2019 (Windows)" xmpMM:InstanceID="xmp.iid:21A02ACAA70511E984DCC4EF8BF6CCE2" xmpMM:DocumentID="xmp.did:21A02ACBA70511E984DCC4EF8BF6CCE2"> <xmpMM:DerivedFrom stRef:instanceID="xmp.iid:21A02AC8A70511E984DCC4EF8BF6CCE2" stRef:documentID="xmp.did:21A02AC9A70511E984DCC4EF8BF6CCE2"/> </rdf:Description> </rdf:RDF> </x:xmpmeta> <?xpacket end="r"?>��Adobed����     



    ��
    ����    
            !1AVQa"��q���2��t��U7BR��#S��4�5u��6v   ���br�3s�$Te��W��c8C�%F�G9��gwX�D�&��'  !1AQq�2a���"R����r���3Ss45Bb���#cT�D�C�$����?���x�S����J+��d_�
    �e�b�΄[�M��1��8�S}iEx7����������B-�*��22##��������
    ��e��\pO��]=ㅛ�O��-��֝�W+AH�M���d�p�evmht��4��p�y���R��Dt5�(~`��F͞�ߜ�%�i��CIu��C�2�\J�.3    <-�nt��r-iBT��%)*�G�B���nܮIF*��<�^�%Q--I/��_�0���!�{�5��{��OI�q��%Ѣ*��e(2)��B]�^�{�j��m<�^�%Q--I�m��^��v^�\�{���I�-<ɼҷ�Du.22*��E$�Q v��j�}�S�+��3id���vm��1��}��Ē��׻���W��٬ҢY   �3��W�T1˳X�qE4��n��S�%əK�&۔�H��Ӯ+
    p�R��".D^�Am)��Ǎ�=�ڒ��W�����!w=Zֵ7yfjU"NIT��M��1�Ϻ�|����\n���a[>�(xG@���g�VϺ���/���Y�����t�q����l��<���\n���a[>�(xG@���g�VϺ���/���Y�����t�q����l��<���\n���a[>�(xG@���g�VϺ���/���Y�����t�q����l��<���\n���a[>�(�"렬-6�Sq��]�5ER�[��+K�ǔ`ړ�Lf�i%C����&l�27V[f�����҆g��1ݽǡjqMүw�4D��usGq<fˎF��F�1Pʞ�|���N.�ϳ}fj���/یR����8�v�c.�e������b��TFE��I9����{��&���{�����\x��Nv}�?���6�����{����s��$�g����o�~�������6�W/[���-���S���3aH�  ���ݵ��T��O
    v]�ƥ�÷���-t���IRfG�H�t�<��(�����:���=���o�<i';>П�p��{�c��=�������j��nE��XY9?6�n}�3Z��M*�&D9b    ��)����N��E��%ER�#2�"��t���݂�p�������\�_���s��  ����{�fO����?����G�j���j�/�\Ҟ�e1!�M�I��d�W����^��#sN�fy]��g��x�-=���g�!΀&Y��Vo*4��S�Dk�bJ^y��[ƢA�+EH�Fe^
L�2��Y��QjM��-p�ʺ��7�tSKA�[�R3����n3֍<�?��2���88�]  �MZ$���&�����_L�a�ѭ�'�q3Ͽ_2Ty>�?6���=�=�����}�������I�����������L���̇�O�Oͥ���fF��~�g�~�d>��}�~m/��{0z5���<���!�G���i}�3كѭ����߯��<�t��K����op���>�|�}S����i}�3كѭ����߯��|�}�~m/��{0z5���<���!���op���>�|�}S�t~�r2?ɕ�8�t�gF��?h��߯��m����7hj#h�5��w�d�Qɓ{��;�(3QR�<M��w����*ּ��jut�u)J��Rw��)����0����z���%N��!�Oϓ��i}�3كѭ�+���}�������I�����������\���̇�O�Oͥ���fF��~�g�~�d>��}�~m/��{0z5���<���!�G���i}�3كѭ����߯��<�t��K����op���>�|�}S����i}�3كѭ���L���̇�O�O͕���fF��~��~�d>����I�����������L���̇�>�?i?6W��}�=�����}�����ִڭ�;l;E�*a[��1"��HAqUFfg�fgS=�3E(�#��b���J��qNN��~�cX�Ѝ,�*DDZ�ץ8�]&��m�:���%%^"*O
    m�:�=�έAB7�%EX��.�_+�u��t��K���)���q3Ͽ_2T�q}+�0˂������Tҙ��JM�I<��5��"��aT��׵��ik����kE�Ow�*�d9��G�.

Как мне показать это на картинке?

1 Ответ

0 голосов
/ 07 мая 2020

Проведя 8 часов, я наконец решил вышеуказанную проблему. Прежде всего, ax ios не поддерживает ReadableStreams, поэтому в итоге я использовал fetch для получения ответа, ответ был в UInt8Array, поэтому я преобразовал его в blob, а не использовал createObjectURL, чтобы я установил его на sr c тега изображения. Я использовал следующий фрагмент.

  (async () => {
                            const fetchedResource = await fetch(url, {
                                method: 'get',
                                headers: {
                             //headers goes here
                                }
                            });
                            const reader = await fetchedResource.body.getReader();

                            var parentComponentInReadClientModal = this;
                            let chunks = [];
                            reader.read().then(function processText({ done, value }) {
                                console.log(parentComponentInReadClientModal);

                                if (done) {
                                    console.log('Stream finished. Content received:')

                                    console.log(chunks);


                                    const blob = new Blob([chunks], { type: "image/png" });
                                    console.log(blob);

                                    parentComponentInReadClientModal.setState({
                                        imagedata: URL.createObjectURL(blob)
                                    });
                                    return
                                }

                                console.log(`Received ${chunks.length} chars so far!`)
                                // console.log(value);
                                const tempArray = new Uint8Array(chunks.length + value.length);
                                tempArray.set(chunks);
                                tempArray.set(value, chunks.length);
                                chunks = tempArray

                                return reader.read().then(processText)
                            })
                        })();
...