前端怎么同时传MultipartFile和对象给Java后端

原创

mob64ca12d94299 2024-02-22 05:19:26 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12d94299的原创作品，请联系作者获取转载授权，否则将追究法律责任

解决方案：前端同时传MultipartFile和对象给Java后端

在实际的项目中，有时候我们需要前端同时传递文件和对象给后端。本文将介绍如何通过前端发送MultipartFile和对象给Java后端。

前端实现

在前端，我们可以使用FormData对象来同时传递文件和对象。首先创建一个FormData对象，然后使用FormData的append方法来添加文件和对象。

var formData = new FormData();
formData.append('file', file); // file为MultipartFile文件对象
formData.append('data', JSON.stringify(data)); // data为普通对象

接着，我们可以使用Fetch API或者Ajax来发送FormData对象给后端。这里以Fetch API为例：

fetch('/upload', {
  method: 'POST',
  body: formData
})
.then(response => {
  console.log('File uploaded successfully');
})
.catch(error => {
  console.error('Error uploading file');
});

后端处理

在Java后端，我们需要编写一个Controller来接收前端传递的文件和对象。首先定义一个DTO类来接收对象数据：

public class DataDTO {
    private String name;
    private int age;
    // getters and setters
}

然后，在Controller中，使用@RequestParam注解来接收文件和对象：

@PostMapping("/upload")
public void uploadFile(@RequestParam("file") MultipartFile file, @RequestParam("data") DataDTO data) {
    // 处理文件和对象
}

示例

假设我们需要上传一个头像文件和用户信息给后端保存，以下是一个示例：

前端代码：

var formData = new FormData();
formData.append('file', avatarFile); // avatarFile为MultipartFile文件对象
formData.append('data', JSON.stringify({name: 'John', age: 30}));

fetch('/upload', {
  method: 'POST',
  body: formData
})
.then(response => {
  console.log('File uploaded successfully');
})
.catch(error => {
  console.error('Error uploading file');
});

后端代码：

public class DataDTO {
    private String name;
    private int age;
    // getters and setters
}

@RestController
public class UploadController {

    @PostMapping("/upload")
    public void uploadFile(@RequestParam("file") MultipartFile file, @RequestParam("data") DataDTO data) {
        // 处理文件和对象
    }
}