Question

目前，我正在寻找从base64向Express server发送/接收React app.数据的解决方案 Express服务器正在读取图片，转换为base64然后转换为byteArray，以便将其发送到客户react-app.

  const request = require('request').defaults({ encoding: null });
  const base64 = require('base64-js');

    request.get(url, (error, response, body) => {
    if (!error && response.statusCode === 200) {
      const buffer = new Buffer(body).toString('base64');
      const byteArray = base64.toByteArray(buffer);
      res.status(200).write(new Buffer(byteArray, 'binary'));
      res.end(undefined, 'binary');
    } else {
      res.status(response.statusCode).send(error.toString());
    }
  });

现在怎样才能在react-app中读取/解码这个byteArray，将这些数据添加为图像src（使用fetch）？

Answer 1

<img src="data:image/gif;base64,R0lGODlhPQBEAPeoAJos......"> 你不需要将base64转换为字节数组。您可以通过提供上述语法将其直接传递给图像源。然后显示所需的图像。

Answer 2

您不需要转换返回的数据。并将其放在src元素的img属性中。

// if image data = { url: 'data:image/gif;xxxxxxxxxxxxx...' }

class App extends React.Component {

  constructor() {
    super();
    this.state = { list: [] };
  }

    componentDidMount() {
    fetch('your-api-endpoint', {
      method: 'get',
    })
    .then(function(result) {
            this.setState({ list: result });
    })
    .catch(function(error) {
        console.log(error)
    });
  }
    render() {
    const { list } = this.state;
    return (
        <div>
          {
            list && list.length > 0
          list.map((img, index) => (
            <img src={img.url} /> // include it as src
          ))
          :
          'no data'
        }
        </div>
    )
  }
}

希望这会有所帮助：）

react，express和fetch - 发送和接收byteArray

2 个答案: