提供 png 图像的 Axios 提供损坏的图像

Question

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

   _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??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????????????gX??u???? x@###:??N(???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?~??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????????{????O??\?IWWW?lc? ????6Z?sIo?M??p??'?+??3P[?yH?|e????e??f???+?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[?glk?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明确设置标题，但我无法解决它。请指导我

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)你可以在标签的src属性中使用的url 来获取 blob 文件img

如本文所述，上面的方法应该更快。

这是jsfiddle演示

更新：

只需发现您可以在选项中指定，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演示

这里是关于缺少二进制数据操作文档的axios问题。在此评论中，您可以找到我建议的相同方法。您也可以使用FileReaderAPI，在此stackoverflow 注释中，您可以找到两种方法的优缺点。