50、文件上传-单文件与多文件上传的使用

50、文件上传-单文件与多文件上传的使用

以下是关于单文件和多文件上传的使用说明：

#### 单文件上传

**1. 前端实现**

- **HTML表单：**

  ```html

  <form action="/upload" method="post" enctype="multipart/form-data">

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

      <input type="submit" value="上传">

  </form>

  ```

  - 设置`enctype="multipart/form-data"`以支持文件上传。

  - `<input type="file">`的`name`属性用于后端接收文件。

- **JavaScript（可选）：**

  使用`XMLHttpRequest`或`Fetch API`实现异步上传，提供进度条和实时反馈。

**2. 后端处理（以Spring Boot为例）：**

- **控制器方法：**

  ```java

  @PostMapping("/upload")

  public String handleFileUpload(@RequestParam("file") MultipartFile file) {

      if (file.isEmpty()) {

          return "请选择文件";

      }

      try {

          // 保存文件到服务器

          String originalFilename = file.getOriginalFilename();

          file.transferTo(new File("upload目录/" + originalFilename));

          return "上传成功";

      } catch (IOException e) {

          return "上传失败：" + e.getMessage();

      }

  }

  ```

  - 使用`@RequestParam`注解接收`MultipartFile`对象。

  - 调用`file.transferTo()`方法保存文件。

#### 多文件上传

**1. 前端实现**

- **HTML表单：**

  ```html

  <form action="/uploads" method="post" enctype="multipart/form-data">

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

      <input type="submit" value="上传">

  </form>

  ```

  - 添加`multiple`属性允许选择多个文件。

- **JavaScript（可选）：**

  使用循环或数组处理多个文件，通过`FormData`对象发送。

**2. 后端处理（以Spring Boot为例）：**

- **控制器方法：**

  ```java

  @PostMapping("/uploads")

  public String handleMultipleFileUpload(@RequestParam("files") List<MultipartFile> files) {

      for (MultipartFile file : files) {

          if (file.isEmpty()) {

              continue;

          }

          try {

              String originalFilename = file.getOriginalFilename();

              file.transferTo(new File("upload目录/" + originalFilename));

          } catch (IOException e) {

              // 处理异常

          }

      }

      return "上传成功";

  }

  ```

  - 使用`List<MultipartFile>`接收多个文件。

  - 遍历列表，逐个保存文件。

#### 注意事项

- **文件大小限制：**

  在后端配置最大上传文件大小，防止服务器资源被耗尽。

  **Spring Boot配置：**

  ```yaml

  spring:

    servlet:

      multipart:

        max-file-size: 10MB # 单个文件最大10MB

        max-request-size: 100MB # 整个请求最大100MB

  ```

- **文件类型限制：**

  在前端通过`<input type="file" accept="image/*">`限制文件类型，后端进行二次验证。

- **安全性：**

  - 对上传的文件进行病毒扫描和内容检测，防止恶意文件上传。

  - 保存文件时使用安全的文件路径和命名规则，防止目录遍历攻击。

- **错误处理：**

  - 提供友好的错误提示，告知用户上传失败的原因。

  - 记录上传日志，便于排查问题。

---

通过以上步骤，可以实现单文件和多文件上传功能。前端负责文件的选择和提交，后端负责接收、验证和保存文件。注意处理文件大小、类型限制和安全问题，提升用户体验和系统稳定性。