Javascript Axios为png图像提供服务时，图像被破坏_Javascript_Es6 Promise_Axios_Ramda.js

Javascript Axios为png图像提供服务时，图像被破坏

javascript

Javascript Axios为png图像提供服务时，图像被破坏,javascript,es6-promise,axios,ramda.js,Javascript,Es6 Promise,Axios,Ramda.js,我使用express作为中间件api。有人点击我的中间件，它会点击第三方api并返回结果。除了创建png并为其服务的get端点之外，其他所有端点都可以正常工作。所以在方法下返回响应 _execute = R.curry((reqFunction, req, res) => { reqFunction(req, res). then(r => { res.status(r.status).header(r.headers).s

我使用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);
  }

而这个.\u send就像

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

如果我直接从浏览器中点击，响应如下 ``` �巴布亚新几内亚

IHDRn��7Q� IDATx��哦��D�ȥ|!H�DD�^)“k”n�̤$H�v뒻�Vж”�+��n——”�[��你只要试试这个

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（，{responseType:'arraybuffer'}）
。然后（（响应）=>{
让图像=btoa(
新的UINT8阵列（response.data）
.reduce（（数据，字节）=>数据+字符串.fromCharCode（字节），“”）
);
返回`data:${response.headers['content-type'].toLowerCase（）}；base64，${image}`；
});

您可以试试这个

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（，{responseType:'arraybuffer'}）
。然后（（响应）=>{
让图像=btoa(
新的UINT8阵列（response.data）
.reduce（（数据，字节）=>数据+字符串.fromCharCode（字节），“”）
);
返回`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
    })

我如何理解这一点：

当您在选项中指定时，

{responseType:'arraybuffer'}

axios将

response.data

设置为

arraybuffer

接下来，创建类似于object-Blob的文件

您可以通过

url.createObjectURL（blob）

获得blob文件的url，您可以在

img

标记的

src

属性中使用该url

如上所述，这种方法应该更快

这是JSFIDLE

UPD：

您可以在选项

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

JSFIDLE

这里是axios关于二进制数据操作缺少文档的介绍。在这里，您可以找到与我建议的相同的方法。您也可以使用

FileReader

API，在stackoverflow comment中，您可以找到这两种方法的优缺点。

很抱歉回答得太晚，但可能有人觉得这种方法更可靠：

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