seo 网站案例南京做网站咨询南京乐识
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/*">`限制文件类型，后端进行二次验证。
- **安全性：**
- 对上传的文件进行病毒扫描和内容检测，防止恶意文件上传。
- 保存文件时使用安全的文件路径和命名规则，防止目录遍历攻击。
- **错误处理：**
- 提供友好的错误提示，告知用户上传失败的原因。
- 记录上传日志，便于排查问题。
---
通过以上步骤，可以实现单文件和多文件上传功能。前端负责文件的选择和提交，后端负责接收、验证和保存文件。注意处理文件大小、类型限制和安全问题，提升用户体验和系统稳定性。