Spring Bootを利用した画像一括アップロードの実現方法

2年 ago
芽依, 雨夜
1 minute

Spring Bootによる画像の一括アップロード機能を利用するには、以下の手順で実行できます。

  1. 最初に画像のアップロードリクエストとロジックを処理するコントローラクラスを作成する
@RestController
public class ImageUploadController {
  
  @Autowired
  private ImageStorageService imageStorageService;
  
  @PostMapping("/uploadImages")
  public List<String> uploadImages(@RequestParam("images") MultipartFile[] images) {
    List<String> imageUrls = new ArrayList<>();
    
    for (MultipartFile image : images) {
      String imageUrl = imageStorageService.storeImage(image);
      imageUrls.add(imageUrl);
    }
    
    return imageUrls;
  }
}
  1. ImageStorageServiceインタフェースと画像を格納するための実装クラスを作成する
public interface ImageStorageService {
  String storeImage(MultipartFile image);
}

@Service
public class ImageStorageServiceImpl implements ImageStorageService {

  @Value("${image.upload.directory}")
  private String uploadDirectory;
  
  @Override
  public String storeImage(MultipartFile image) {
    String fileName = StringUtils.cleanPath(image.getOriginalFilename());
    
    try {
      Path filePath = Paths.get(uploadDirectory, fileName);
      Files.copy(image.getInputStream(), filePath, StandardCopyOption.REPLACE_EXISTING);
      return fileName;
    } catch (IOException e) {
      throw new RuntimeException("Failed to store image " + fileName, e);
    }
  }
}
  1. アプリケーションのプロパティファイルに画像のアップロード先ディレクトリを設定する。
image.upload.directory=/path/to/upload/directory
  1. フロントエンドで画像をまとめてアップロードするためのフォームを作成する
<form method="POST" enctype="multipart/form-data" action="/uploadImages">
  <input type="file" name="images" multiple>
  <input type="submit" value="Upload">
</form>

上記の処理が完了した時点で、ユーザーが複数の画像を選択してアップロードすると、バックエンドは画像を1枚ずつ処理し、指定したディレクトリに格納します。各画像が正常に格納されると、その画像のURLリストがフロントエンドページに返されます。

bannerAds