将图像（png）从我的后面（Java spring）发送到前面（react）并打印它

Question

我们在 React 前端显示从 Java Spring 后端获取的图像时遇到了困难。尽管成功地从后端检索了图像数据，但我们无法在前端的标签中渲染它。

这是我回复的：

   @PostMapping("/getProduct/{type}")
    @ResponseBody
    public ResponseEntity<byte[]> getProduct(@PathVariable("type") String productName) {
        String filePath = DIRECTORY_UPLOAD + PRODUCTS + File.separator;
        List<File> files = findAllFile(filePath);


        File productFile = files.stream()
                .filter(f -> f.getName().contains(productName))
                .findFirst()
                .orElse(null);

        if (productFile != null && productFile.exists()) {
            try {
                byte[] imageBytes = Files.readAllBytes(productFile.toPath());

                return ResponseEntity.ok()
                        .contentType(MediaType.IMAGE_PNG)
                        .body(imageBytes);
            } catch (IOException e) {
                e.printStackTrace(); // Handle exception appropriately
                return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
            }
        } else {
            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
        }
    }

以及我的前线如何对待它：

 getImage(type: string): Promise<Response> {

    return axios.post("api" + PATH_UPLOAD +"/getProduct/" + type.replace("/",""), {
      headers: {
        ...authHeader(),
        "Content-Type": "multipart/form-data",
      },

    });
  }

 useEffect(() => {
        const fetchImage = async () => {

            await ProductsService.getImage(data.type).then(async res => {
                if (res.status === 200) {
                    const file = new Blob([res.data], {
                        type: "image/png",
                    });
                    //Build a URL from the file
                    let fileurl = URL.createObjectURL(file);
                    console.log(fileurl);
                    setProductImgURL(fileurl);

                }

            } )
        } ;
        fetchImage();
    } , []);

         {
                                    productImgURL === "" ? "" : <img src={productImgURL} alt="Image Produit" className="image"  style={{width: "25%", height: "25%"}}/>
                                }

通过检查网络请求和响应来验证后端端点功能。 实现了前端逻辑来获取图像数据并将其呈现在标签中。 确保前端和后端代码中的错误处理。 使用不同的方式创建 blob，并尝试直接打印 res.data

Answer 1

您应该告诉 axios 您的响应数据应该是 Blob :

axios.get(url, { responseType: "blob" })
       .then(res => res.data)
       .then(URL.createObjectURL)
       .then(setProductImgURL)

就你而言，它应该更像是：

 getImage(type: string): Promise<Response> {

    return axios.post("api" + PATH_UPLOAD +"/getProduct/" + type.replace("/",""), {
      headers: {
        ...authHeader(),
        "Content-Type": "multipart/form-data",
      },
      responseType: "blob",
    });
  }

然后：

 useEffect(() => {
        const fetchImage = async () => {

            await ProductsService.getImage(data.type).then(async res => {
                if (res.status === 200) {
                    const file = res.data;
                    //Build a URL from the file
                    let fileurl = URL.createObjectURL(file);
                    console.log(fileurl);
                    setProductImgURL(fileurl);
                }

            } )
        } ;
        fetchImage();
    } , []);