如何使用Spring Boot和React展示AWS S3存储桶中的图片？

1 前端渲染逻辑错误 #

当前前端判断逻辑错误：只要存在userId就渲染img标签，即使用户没有上传头像（imageUrl为null），也会请求下载接口，此时后端返回空字节流，导致图片显示异常。
修复方案：将判断条件改为校验imageUrl是否存在：

{
  profile.imageUrl ? (<img src={`http://localhost:5000/api/v1/users/${profile.userId}/image/download`} alt="profile" /> ) : <h5>No profile Image Uploaded</h5>
}

补充：建议给img标签添加alt属性，提升可访问性

2 后端下载接口未设置正确的响应头 #

当前控制器直接返回byte[]，Spring Boot默认会设置Content-Type: application/octet-stream，浏览器会将该类型响应作为二进制文件下载，不会识别为图片渲染。
修复方案：在GetMapping注解中指定图片类型的响应格式：

@GetMapping(path = "{userId}/image/download", produces = {MediaType.IMAGE_JPEG_VALUE, MediaType.IMAGE_PNG_VALUE, MediaType.IMAGE_GIF_VALUE})
public byte[] downloadUserProfileImage(@PathVariable("userId") UUID userId) {
    return userProfileService.downloadUserProfileImage(userId);
}

如果需要适配更多动态图片格式，可以修改接口返回ResponseEntity，主动从S3对象中读取ContentType设置到响应头：

@GetMapping(path = "{userId}/image/download")
public ResponseEntity<byte[]> downloadUserProfileImage(@PathVariable("userId") UUID userId) {
    // 从S3获取对象时同步获取元数据
    S3Object s3Object = // 此处替换为你获取S3对象的逻辑
    byte[] content = IOUtils.toByteArray(s3Object.getObjectContent());
    HttpHeaders headers = new HttpHeaders();
    headers.setContentType(MediaType.parseMediaType(s3Object.getObjectMetadata().getContentType()));
    return new ResponseEntity<>(content, headers, HttpStatus.OK);
}

3 S3上传时未设置文件的真实Content-Type #

当前FileStore的save方法没有设置ObjectMetadata的contentType属性，S3会默认将文件存储为binary/octet-stream，导致后续下载时无法获取正确的文件类型。
修复方案：上传时将文件的真实ContentType传递到后端，写入S3元数据：

1. 修改后端上传接口，读取MultipartFile的ContentType：

// 上传接口示例
@PostMapping(path = "{userId}/image/upload")
public void uploadUserProfileImage(@PathVariable("userId") UUID userId, @RequestParam("file") MultipartFile file) {
    // 校验文件逻辑省略
    Map<String, String> metadata = new HashMap<>();
    metadata.put("Content-Type", file.getContentType());
    // 调用fileStore.save时传入metadata
}

2. 修改FileStore的save方法，将Content-Type写入官方元数据而非用户自定义元数据：

public void save(String path,
                 String fileName,
                 Optional<Map<String, String>> optionalMetadata,
                 InputStream inputStream) {
    ObjectMetadata metadata = new ObjectMetadata();
    optionalMetadata.ifPresent(map -> {
        if (!map.isEmpty()) {
            // 单独处理Content-Type写入官方字段
            if (map.containsKey("Content-Type")) {
                metadata.setContentType(map.get("Content-Type"));
                map.remove("Content-Type");
            }
            map.forEach(metadata::addUserMetadata);
        }
    });
    try {
        s3.putObject(path, fileName, inputStream, metadata);
    } catch (AmazonServiceException e) {
        throw new IllegalStateException("Failed to store file to s3", e);
    }
}

4 可选优化：上传成功后自动刷新页面数据 #

当前上传成功后仅打印日志，没有重新拉取用户列表，需要手动刷新页面才能看到新上传的头像。可以将fetchUserProfiles方法通过props传递给MyDropZone组件，上传成功后调用即可实时更新：

// UserProfiles组件中传递方法
<MyDropZone userId={profile.userId} onUploadSuccess={fetchUserProfiles}></MyDropZone>

// MyDropZone组件上传成功后调用
axios.post(`http://localhost:5000/api/v1/users/${userId}/image/upload`, formData, {
  headers: {
    'Content-Type':'multipart/form-data'
  }
}).then((response) => {
  console.log("Uploaded")
  onUploadSuccess()
}).catch((error) => {
  console.log(error)
})

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