javascript - 服务 png 图像的 Axios 图像损坏

Question

我正在使用 express 作为中间件 api。一个人点击我的中间件，它点击一些第三方 api 并返回结果。它适用于所有其他端点，期望有一个创建 png 并为其提供服务的 get 端点。所以在方法下返回响应

   _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);
  }

这个._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��7UYYٿ 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ò�����8 Qf�����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� v��U~~����Q)))����9��V;��[��n.tAA����U����l+P$O��[��̙3��3׹Z [����|)��ϯ��WIII>>^|��7o��q��~�� R zY T��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��������{����ӧO��\��IWWW ��lc̃����6Z��sIo6Mϛ��p��rmӒ'��+��3P[��yH��|e��e����af������+鱱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�ÀÀ�8 8:�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��ON N ����推����! ��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并明确设置 header ，但我无法解决。请指导我

Answer 1

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

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) 获取 blob 文件的 url，您可以在 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关于缺少二进制数据操作文档。在这个comment您可以找到我建议的相同方法。您也可以在 this 中使用 FileReader API您可以在 stackoverflow 评论中找到这两种方法的优缺点。