Question

有人可以指导我如何从Spring Boot后端获取图像数据到React前端吗？我基本上是将文件保存在服务器中，并使用保存在数据库中的路径来检索图像。

到目前为止，我设法将文件作为字节数组发送到前端，并且可以在网络中对其进行检查。我需要在<img/>中显示它的帮助谢谢

Answer 1

最近在研究这个主题。分享我的经验

反应

const [imageData, setImageData] = React.useState({});

  const getImage = (url) => {
    axios.get(url).then((response) => {
      setImageData(response);
    });
  };

  const displayImage = () => {
    return (
      <div className="img">
        <img
          src={`data:image/jpeg;base64,${imageData}`}
          alt=""
        />
      </div>
    );
  };

控制器

@GetMapping("/{id}")
    public ResponseEntity<byte[]> getFile(@PathVariable Long id) {
       FileObject fileObject =  fileRepository.findById(id).get();
       byte[] base64encodedData = Base64.getEncoder().encode(fileObject.getData());
        return ResponseEntity.ok()
                .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + 
                 fileObject.getName() + "\"")
                .body(base64encodedData);
    }

注意：重要的是图像数据在服务器中是 Base64 编码的

Base64.getEncoder().encode(fileObject.getData())

在javascript前端中显示来自Spring Boot后端的图像文件

1 个答案: