Spring与React间Base64图片编码异常致图片无法渲染问题

我开发的菜品管理应用中，前端React将图片转为带前缀的Base64格式（data:image/png;base64,iVBORw0K...）后发送给Spring Boot后端，后端解码后以Blob形式存入数据库。当从后端获取菜品时，重新编码返回的Base64字符串丢失了分隔符，变为dataimagepngbase64iVBOR....，导致图片无法渲染。手动补充分隔符后仍出现控制台错误：

React端编码格式 #

data:image/png;base64,iVBORw0K...

Spring Boot后端代码 #

@PostMapping
public ResponseEntity<Dish> saveDish(@RequestBody Dish dish) {
    Dish response = dishService.save(dish);
    return ResponseEntity.ok(response);
}

@Override
public Dish save(Dish dish) {
    log.info("Saving dish: {}", dish);

    DishEntity dishEntity = DishEntity.builder()
            .image(Base64.decodeBase64URLSafe(dish.getImage()))
            .price(dish.getPrice())
            .title(dish.getTitle())
            .description(dish.getDescription())
            .category(dish.getCategory())
            .count(1L)
            .totalPrice(dish.getPrice())
            .build();

    DishEntity savedDish;
    try {
        savedDish = dishRepository.save(dishEntity);
    } catch (Exception ex) {
        throw new OperationFailedException("Save dish method failed");
    }

    return Dish.builder()
            .id(savedDish.getId())
            .image(Base64.encodeBase64String(savedDish.getImage()))
            .price(savedDish.getPrice())
            .title(savedDish.getTitle())
            .description(savedDish.getDescription())
            .category(savedDish.getCategory())
            .count(savedDish.getCount())
            .totalPrice(savedDish.getTotalPrice())
            .build();
}

后端返回的异常Base64格式 #

dataimagepngbase64iVBOR....

1. 修正Base64编码解码逻辑 #

问题核心在于后端直接对包含前缀的完整Base64字符串解码，导致前缀被当成编码内容处理，后续编码返回时自然丢失分隔符。需要分离前缀和实际编码内容：

@Override
public Dish save(Dish dish) {
    log.info("Saving dish: {}", dish);
    
    // 拆分Base64前缀与实际编码内容
    String base64Image = dish.getImage();
    String[] parts = base64Image.split(",");
    String imageData = parts[1];
    byte[] imageBytes = Base64.decodeBase64(imageData); // 仅解码编码部分

    DishEntity dishEntity = DishEntity.builder()
            .image(imageBytes)
            .price(dish.getPrice())
            .title(dish.getTitle())
            .description(dish.getDescription())
            .category(dish.getCategory())
            .count(1L)
            .totalPrice(dish.getPrice())
            .build();

    DishEntity savedDish;
    try {
        savedDish = dishRepository.save(dishEntity);
    } catch (Exception ex) {
        throw new OperationFailedException("Save dish method failed");
    }

    // 返回时重新拼接完整的Base64格式
    String fullBase64Image = parts[0] + "," + Base64.encodeBase64String(savedDish.getImage());
    return Dish.builder()
            .id(savedDish.getId())
            .image(fullBase64Image)
            .price(savedDish.getPrice())
            .title(savedDish.getTitle())
            .description(savedDish.getDescription())
            .category(savedDish.getCategory())
            .count(savedDish.getCount())
            .totalPrice(savedDish.getTotalPrice())
            .build();
}

如果前端可能传递不同类型的图片（如jpg），建议用正则动态提取MIME类型，避免硬编码：

Pattern pattern = Pattern.compile("data:(.*?);base64,");
Matcher matcher = pattern.matcher(base64Image);
if (matcher.find()) {
    String mimeType = matcher.group(1);
    String fullBase64Image = "data:" + mimeType + ";base64," + Base64.encodeBase64String(savedDish.getImage());
    // 后续赋值逻辑
}

2. 解决手动修复后的错误 #

手动补充分隔符仍报错，是因为之前错误解码导致字节数组已损坏，重新编码后的内容本身无效。按照上面的逻辑重新保存图片，确保仅处理Base64的实际编码部分，返回时正确拼接前缀即可解决。

内容的提问来源于stack exchange，提问作者Matvey Androsyuk