前后端 多文件上传 大文件 代码实例
时间: 2024-03-06 10:49:23 浏览: 24
这里是一个基于Node.js和Express的前后端多文件上传的代码示例,支持上传大文件:
后端代码:
```javascript
// 引入依赖
const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs');
// 创建Express实例
const app = express();
// 设置上传文件保存的目录
const uploadDir = path.join(__dirname, 'uploads');
// 如果目录不存在则创建
if (!fs.existsSync(uploadDir)) {
fs.mkdirSync(uploadDir);
}
// 设置上传配置
const upload = multer({
dest: uploadDir,
limits: {
fileSize: 1024 * 1024 * 50 // 50MB
}
}).array('files');
// 处理文件上传请求
app.post('/api/upload', (req, res) => {
upload(req, res, (err) => {
if (err instanceof multer.MulterError) {
// 处理Multer错误
res.status(500).json({ code: -1, message: '上传失败' });
} else if (err) {
// 处理其他错误
res.status(500).json({ code: -1, message: '上传失败' });
} else {
// 上传成功
res.status(200).json({ code: 0, message: '上传成功' });
}
});
});
// 启动服务器
app.listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});
```
前端代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传示例</title>
</head>
<body>
<form>
<input type="file" name="files" multiple>
<button type="button" onclick="upload()">上传</button>
</form>
<script>
function upload() {
const files = document.querySelector('input[type="file"]').files;
const formData = new FormData();
for (let i = 0; i < files.length; i++) {
formData.append('files', files[i]);
}
fetch('/api/upload', {
method: 'POST',
body: formData
}).then(res => {
console.log(res);
}).catch(err => {
console.error(err);
});
}
</script>
</body>
</html>
```
这个示例使用了multer库来处理文件上传,设置了上传文件保存的目录和文件大小限制。前端使用了FormData来构建表单数据,使用fetch API发送POST请求。
需要注意的是,这个示例并没有实现文件上传的进度条,如果需要实现进度条,可以使用XMLHttpRequest对象来发送请求,并监听upload事件来获取上传进度。