springboot传图片数组给前端

Spring Boot 与前端交互传递图片数组通常涉及到文件上传和Base64编码。当你需要将一组图片作为数组发送到前端时，可以按照以下步骤操作：

1. **后端处理**:
- 将图片文件存储在服务器上：Spring Boot 提供了`org.springframework.web.multipart.MultipartFile`接口用于处理上传的文件，你可以通过 `MultipartFile[] files` 接收上传的图片数组。
- 将文件转换为Base64字符串：每个图片文件读取后，可以使用Java的`FileUtils`或者第三方库如Apache Commons IO将其转换成Base64编码的字符串。

import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.util.Base64;

List<String> base64Images = new ArrayList<>();
for (MultipartFile file : files) {
    if (!file.isEmpty()) {
        byte[] bytes = file.getBytes();
        String encodedImage = Base64.getEncoder().encodeToString(bytes);
        base64Images.add(encodedImage);
    }
}

2. **响应前端**:
- 将Base64编码的字符串数组封装进JSON响应体返回给前端。例如使用`@RestController`或`@GetMapping`注解的REST API：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ImageController {

    @GetMapping("/images")
    public ResponseEntity<List<String>> getImageArray() {
        return ResponseEntity.ok(base64Images);
    }
}

3. **前端接收**:
- 使用Ajax或Fetch等前端技术从API获取数据，然后解析Base64字符串并显示在页面上。前端通常是HTML、JavaScript和可能的框架（如React、Vue或Angular）。

fetch('/images')
  .then(response => response.json())
  .then(images => {
      // 解码Base64字符串，并显示在图片元素中
      images.forEach(image => {
        let imgElement = document.createElement('img');
        imgElement.src = 'data:image/jpeg;base64,' + image;
        // 其他DOM操作...
      });
  })
  .catch(error => console.error(error));