服务 png 图像的 Axios 图像损坏

Axios serving png image is giving broken image

我正在使用 express 作为 middle-ware api.A 人点击我的 middle-ware ，它点击一些第三方 api 和 returns 返回结果。它适用于所有其他端点，期望有一个创建 png 并为其提供服务的 get 端点。 所以根据方法 returns 响应 

   _execute = R.curry((reqFunction, req, res) => {
        reqFunction(req, res).
        then(r => {
          res.status(r.status).header(r.headers).send(r.data)
        }).
        catch(err => {
          res.status(err.response.status).header(err.headers).send(err.response.data)
        })
      });

和reqFunction是类似

的方法 
  modelDiagram = (req, res) => {
    const headers = req.headers;
    const modelName = req.params['modelName'];
    const endPoint = this.modelDiagramEndPoint + '/' + modelName;
    return this.httpRequests.get(endPoint, headers);
  }

和httpRequests.get方法是

  get = (endPoint, headers) => {
    let options = {
      method: 'GET',
      url: endPoint
    }
    options = this.addHeaders(headers, options);
    return this._send(options);
  }

和this._send就像

  _send = (options) => {
    return axios(options);
  };

如果我直接从浏览器点击响应就像 ``` �PNG

IHDRn��7Q�� IDATx����oHk����D��ş|!H.DD��^)"k"n��̤$H��V뒻��Vж"+��n-"��[��XL�� լ��[Z��^����lnK&K����=��9��9z��sʋs��~����g��g����gf����l��z��QIcc�dEE< ��?��\YY��վ}��R7!{������'O�T�C�x�B�fff��۷UYYٿ8��^�a� ������?��92O��L2w�����{���s�NXZ��k۝N�r�\�<.�N������/_���尵�����ϫ���E�['����"��x˞|f ����~��N��K��d������u ����3j����u5������%p6����Sj����ꛎ3>��<)��M�M�y4����v������{� N.gSpCw~��p��[Opr��Φ��F��M@pR8��[��z������ä'O.g����-+��I7.v���� �oW�<)� �ɓ�|�p���2;<=�)�fF;Փ��4 4ò�����8Qf�����V�,X�n���},4À���H�8� n}}������8"����À7p�/]��j����h�0g�@Bfપ�Too/������z��mD� 8����Ḹ8��w��^������v��ڵ��v�������������������������� x@###:��N(�O?��o�6o�'YSS�n߉'|����Tcccx������P����::Z����h1 ��vU~~����Q)))����9��V;��[��n.tAA����U����l+P$O��[��̙3��3׹ Z[����|)��ϯ��WIII>>^ |����7o��q��~��RzYT��q����@��]7p2����ZZZ��Ç}v^TT��Feee<��0��;v��P������o. U[[����e�� ���Q������m]]��,//ϻ~EE��3"��ի���<h���[���Έ����;��.Y^��SYY����l��'X��ն����j����4##C/��{��@u��.P{ � ��Ѹ;7����9�a58����j[��u����3��ş'��Zu~8��������{�� ... 1UZZj����N����T}��577����r����F�A����1b�b����R��0�O�拓@e���-�C%&&�mUTTԚO��$e�H1��ӿ���A}A#?��������H�����#�&7bo�%z�̐3/77W�>��#/8�a�a�p�ÀÀ�88:�Hyz�x��[�].�L$|w <55����tvv����z=77���۸HhN��;�_�yV��!�@o�l��ߟ���Y!�!�ppp�C�C����888�!�!�!�pppp�C�C������8zppp��)�>w�����k��[V��N�S�\�W�X'�zzz/��X���ˇ�-��W" h���l�-�|w�v��������hy06���|�N1Կ�jDM/�����'�����/՝��5��w�[:���Hr�zc �����η�37��C��U����8�a�pNn�C�ƍ�M�ɣ�P����&��a�<�����|�ppp��0�8�a�a�.���xb;u���8���k׮��?�\EEE�t��I���*))I��ǫ��]6;;����Ull����Q����3��|��ƍ��zU\��.����y����z����W. ��+������W��Ѽ��v����RGJJ�ONN����推����!鼼<]��7����M[zhoglk��9uꔷ��������kjjt^ UU^>wr������}&$$����H.GFF��YYY��.77W��t����d�aɼl�^ZZ�6"�XwϞ=:��@ qYY������O������T��,����cLKKS����A���}���8pi���^xN�Gcݒ�������N���ѣ�u233u~SS�>y����d�?11���dx��9���V-,,�5栵:�#�d{{�NK���1J}:-s��˗��HZ�e~mnn^1?ÜX���9$=66�JKK}�d��tuuu䂓�]�P����VK�$J�l'��y����X�����6�?::��dH4G���P�������B��&s�� Nr���O�\��� 8�0�0�8�a�a�p��8l'p��V^��t��5�w�ᩩ�/-w���sOWW�빹��t��E�@s:��Y�҇ȳ�n��|�fC,��,$h!�B!����?Ǔ�8���IEND�B。 ```

但是图像损坏了。我已经尝试了很多事情，比如 req.end 并明确设置 headers 但我无法解决 it.Please 指导我

你试试这个

return axios.get(<URL WHICH RETURNS IMAGE IN STRING ex:'http://host/image.png'>, { responseType: 'arraybuffer' })
  .then((response) => {
    let image = btoa(
      new Uint8Array(response.data)
        .reduce((data, byte) => data + String.fromCharCode(byte), '')
    );
    return `data:${response.headers['content-type'].toLowerCase()};base64,${image}`;
  });

抱歉回答晚了，但也许有人觉得这种方法更可靠：

axios.get('/path/to/image.png', { responseType: 'arraybuffer' })
.then(response => {
      let blob = new Blob(
        [response.data], 
        { type: response.headers['content-type'] }
      )
      let image = URL.createObjectURL(blob)
      return image
    })

我是怎么理解的：

  1. 当您在选项 { responseType: 'arraybuffer' } 中指定时，axios 会将 response.data 设置为 ArrayBuffer
  2. 接下来创建类文件对象 - Blob
  3. 您可以通过 URL.createObjectURL(blob) 获得 url 到 blob 文件，您可以在 img 标签的 src 属性中使用

如上述 article 方法所述，上述方法应该更快。

这是 jsfiddle demo

更新：

只是发现您可以在选项 responseType: 'blob' 中指定，这样您就不需要自己创建 Blob 对象：

axios.get('https://picsum.photos/300/300', {responseType: 'blob'})
.then(response => {
  let imageNode = document.getElementById('image');
  let imgUrl = URL.createObjectURL(response.data)
  imageNode.src = imgUrl
})

Jsfiddle demo

在这里 axios issue about missing documentation for binary data manipulation. In this comment you can find the same approach that I suggest. Also you can use FileReader API, in Whosebug 评论你可以找到这两种方法的优缺点。