js filereader 上传图片 multipartfile

利用JavaScript中的FileReader对象可以实现在浏览器中读取本地文件的功能。而在后端可以使用Spring Boot框架的MultipartFile来接收上传的文件。

首先，在前端页面的js文件中，可以创建一个FileReader对象来读取用户选择的图片文件：

// 前端页面
const fileInput = document.getElementById('fileInput');
const reader = new FileReader();

fileInput.addEventListener('change', function(event) {
  const file = event.target.files[0];
  
  reader.readAsDataURL(file);
});

reader.onload = function(event) {
  const base64String = event.target.result;
  // 将base64格式的图片数据发送到后端
  // 发送请求的代码
}

当用户选择了图片文件，并触发change事件后，FileReader会读取图片文件的内容，并将其转换为base64编码的字符串。该字符串可以通过发送请求将图片数据传递给后端。

接下来，在后端的Controller中，可以使用@RequestParam注解来声明一个MultipartFile类型的参数，用于接收前端传递过来的图片文件：

// 后端Controller
@RestController
public class UploadController {
  
  @PostMapping("/upload")
  public String uploadImage(@RequestParam("file") MultipartFile file) {
    // 处理上传的图片文件
    // 返回结果
  }
}

注意，在上述代码中，@PostMapping注解用于指定请求路径，@RequestParam注解用于声明接收的文件参数名。

在Controller中，可以根据具体的业务需求，对上传的图片文件进行处理，例如保存到服务器的本地目录或者将图片数据保存到数据库中。处理完成后，可以返回一些结果信息给前端。

以上就是使用JavaScript的FileReader对象和Spring Boot框架的MultipartFile来实现图片上传的简单流程。