SpringBoot：轻松实现文件上传，FormData让你得心应手！

2023-06-07 19:44:05

利用 FormData 和 SpringBoot 实现文件上传

简介

在现代网络应用中，文件上传已成为一项不可或缺的功能，广泛应用于图像处理、电子商务、在线音乐和视频等领域。作为开发者，实现文件上传一直是一个备受关注的问题。本文将深入探讨如何利用 FormData 和 SpringBoot 实现文件上传，提供详细的步骤和示例代码。

FormData：一种灵活的文件上传工具

FormData 是 JavaScript 中用于收集表单数据的对象，它提供了灵活便捷的文件上传功能。相较于传统的表单提交方式，FormData 优势明显：

支持多种数据类型： 不仅支持文本输入，还支持文件上传。
异步发送： 无需等待整个表单提交完成，即可将文件上传到服务器。
跨平台兼容： 可在所有主流浏览器中使用。

SpringBoot：轻量级的开发框架

SpringBoot 是一个轻量级且功能强大的 Java 框架，因其简便的配置和灵活性而深受开发者喜爱。在SpringBoot中实现文件上传，FormData 是一个理想的选择。

实战指南

1. 搭建 SpringBoot 项目

使用 Spring Initializr 快速创建一个 SpringBoot 项目，并添加以下依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

2. 创建表单

在项目页面中创建包含文件输入框和提交按钮的表单：

<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="Upload">
</form>

3. 处理文件上传

在 SpringBoot 项目的控制器中定义处理文件上传的路由：

@PostMapping("/upload")
public String upload(@RequestParam("file") MultipartFile file) {
    // 保存文件
    String fileName = file.getOriginalFilename();
    file.transferTo(new File(fileName));
    return "success";
}

4. 实现异步上传（可选）

通过 FormData 的 append() 方法将文件添加到 FormData 对象中，再使用 fetch() 方法异步发送该对象：

const formData = new FormData();
formData.append("file", file);

fetch('/upload', {
    method: 'POST',
    body: formData
}).then(res => {
    console.log('File uploaded successfully');
});