当前位置：首页 > article >正文

功能篇：表单提交，multiple-data方式提交文件，后端接收方式

article 2025/1/7 13:05:59

当使用`multiple-data`方式提交文件时，通常是指在HTML表单中设置`enctype="multipart/form-data"`属性，并且允许用户选择多个文件上传。为了确保后端能够正确接收这些文件，需要根据所使用的编程语言和框架来配置相应的处理逻辑。

下面是一些常见服务器端语言如何接收和处理多文件上传的例子：

### Python (Flask 框架)

```python
from flask import request

@app.route('/upload', methods=['POST'])
def upload_file():
files = request.files.getlist("file[]") # 假设前端的文件输入字段名是 "file[]"
for file in files:
if file and allowed_file(file.filename): # 自定义函数检查文件类型是否允许
filename = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
return 'Files uploaded successfully'
```

### PHP

```php
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
foreach ($_FILES['files']['name'] as $key => $name) {
if ($_FILES['files']['error'][$key] == 0) {
move_uploaded_file(
$_FILES['files']['tmp_name'][$key],
"uploads/" . basename($name)
);
}
}
}
?>
```

### Node.js (Express 框架, 使用 multer 中间件)

首先安装 `multer`:

```bash
npm install --save multer
```

然后在代码中使用它：

```javascript
const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

const app = express();

app.post('/upload', upload.array('photos', 12), function (req, res, next) {
// req.files 是一个包含所有已上传文件的数组
// req.body 将包含文本字段，如果有的话
console.log(req.files);
res.send('Files uploaded!');
});
```

### Java (Spring Boot 框架)

```java
@PostMapping("/upload")
public String handleFileUpload(@RequestParam("files") MultipartFile[] files) {
for (MultipartFile file : files) {
if (!file.isEmpty()) {
try {
byte[] bytes = file.getBytes();
Path path = Paths.get(UPLOAD_DIR + file.getOriginalFilename());
Files.write(path, bytes);
} catch (IOException e) {
e.printStackTrace();
}
}
}
return "Files uploaded successfully!";
}
```