一步步教你打造文件上传功能，让用户轻松分享文件！

2023-12-25 01:52:39

使用若依前后端一体架构构建文件上传功能

在后端不分离的架构下，比如若依框架，构建文件上传功能变得轻而易举。本文将一步步引导你创建文件上传页面，让用户轻松分享文件。

前端文件上传

在前端，首先添加文件上传组件，可使用 HTML input 标签或第三方控件：

<input type="file" name="file" multiple>

随后，监听上传组件的 change 事件，获取上传的文件列表：

const fileInput = document.querySelector('input[type=file]');

fileInput.addEventListener('change', (event) => {
  const files = event.target.files;
  // 处理文件上传
});

向后端发送文件

使用 FormData 对象将文件转换为二进制格式，并发送到服务器：

const formData = new FormData();

for (let i = 0; i < files.length; i++) {
  formData.append('file', files[i]);
}

fetch('/upload', {
  method: 'POST',
  body: formData,
});

后端处理上传

在后端，使用 Spring Boot 的 MultipartFile 类处理上传的文件：

@PostMapping("/upload")
public void upload(@RequestParam("file") MultipartFile file) {
  // 处理文件上传
}

存储和数据库操作

将文件存储到文件系统中，并使用 Java File 类操作：

File file = new File("/path/to/file");
file.write(file.getBytes());

使用 Spring Boot 的 JPA 和 JPA 存储库将文件信息存储到数据库：

@Entity
public class File {

  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  private Long id;

  private String name;

  private String path;

  // 省略其他属性和方法
}

@Repository
public interface FileRepository extends JpaRepository<File, Long> {

}

@Service
public class FileService {

  @Autowired
  private FileRepository fileRepository;

  public void save(File file) {
    fileRepository.save(file);
  }

  // 省略其他方法
}

前端文件查询和下载

使用 AJAX 查询文件，并使用 HTML5 的 download 属性下载文件：

// 查询文件
fetch('/files')
  .then((res) => res.json())
  .then((data) => {
    // 显示文件列表
  });

// 下载文件
const link = document.createElement('a');
link.href = '/download?id=1';
link.download = 'file.txt';
link.click();

代码示例

以下代码演示了完整的文件上传流程：

前端

<input type="file" name="file" multiple>

const fileInput = document.querySelector('input[type=file]');

fileInput.addEventListener('change', (event) => {
  const files = event.target.files;

  const formData = new FormData();

  for (let i = 0; i < files.length; i++) {
    formData.append('file', files[i]);
  }

  fetch('/upload', {
    method: 'POST',
    body: formData,
  })
    .then((res) => res.json())
    .then((data) => {
      // 处理上传后的文件
    });
});

后端

@PostMapping("/upload")
public void upload(@RequestParam("file") MultipartFile file) {
  // 处理文件上传

  // 存储文件
  File file = new File("/path/to/file");
  file.write(file.getBytes());

  // 存储文件信息到数据库
  File fileEntity = new File();
  fileEntity.setName(file.getName());
  fileEntity.setPath(file.getPath());

  fileRepository.save(fileEntity);
}