AntD上传文件 结合Axios 服务端由Spring MVC接收

以下将演示：如何使用AntD的上传组件，结合axios工具，向Spring MVC服务端上传文件。

前端发送

基于AntD的上传组件，采用手工上传模式；上传的同时，附加了一个category参数；

const [category, setCategory] = useState<any>();

const [fileList, setFileList] = useState<UploadFile[]>([]);

const handleUpload = () => {
    // 参数
    let params = {category, file: fileList[0] as FileType}
    // 发送
    axios.post('/submit', params).then((data: any) => {
        postForm([]);
        notify.success({message: '上传成功', description: data, duration: 300});
    });
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

服务端接收

@ResponseBody
@RequestMapping(value = "/submit", method = RequestMethod.POST)
public Result<String> create(@RequestParam String category, @RequestParam MultipartFile file) {

    // file.getInputStream()
    // TODO:
}
1
2
3
4
5
6
7