vue实现批量上传
批量上传的实现方法
前端实现
-
使用
<input type="file" multiple>元素允许用户选择多个文件<template> <input type="file" multiple @change="handleFileChange"> </template> -
处理文件选择事件
methods: { handleFileChange(event) { const files = event.target.files if (!files.length) return this.uploadFiles(files) } } -
创建上传函数
async uploadFiles(files) { const formData = new FormData() Array.from(files).forEach(file => { formData.append('files[]', file) })
try { const response = await axios.post('/api/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) console.log('上传成功', response.data) } catch (error) { console.error('上传失败', error) } }
#### 后端处理
1. Express 示例
```javascript
const multer = require('multer')
const upload = multer({ dest: 'uploads/' })
app.post('/api/upload', upload.array('files[]'), (req, res) => {
res.json({ message: '文件上传成功', files: req.files })
})- Spring Boot 示例
@PostMapping("/api/upload") public ResponseEntity<?> uploadFiles(@RequestParam("files[]") MultipartFile[] files) { // 处理文件存储逻辑 return ResponseEntity.ok("文件上传成功"); }
进度显示
-
添加上传进度条
<progress :value="uploadProgress" max="100"></progress> -
更新进度回调
axios.post('/api/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' }, onUploadProgress: progressEvent => { this.uploadProgress = Math.round( (progressEvent.loaded * 100) / progressEvent.total ) } })
文件限制
- 添加文件类型和大小验证
validateFiles(files) { const validTypes = ['image/jpeg', 'image/png'] const maxSize = 5 * 1024 * 1024 // 5MB
return Array.from(files).every(file => { return validTypes.includes(file.type) && file.size <= maxSize }) }
#### 断点续传
1. 分片上传实现
```javascript
async uploadChunks(file) {
const chunkSize = 1 * 1024 * 1024 // 1MB
const chunks = Math.ceil(file.size / chunkSize)
for (let i = 0; i < chunks; i++) {
const start = i * chunkSize
const end = Math.min(file.size, start + chunkSize)
const chunk = file.slice(start, end)
await this.uploadChunk(file.name, i, chunks, chunk)
}
}注意事项
- 确保服务器配置了足够的上传大小限制
- 对于大文件上传，考虑实现分片上传或断点续传功能
- 前端应添加适当的文件类型和大小验证
- 上传过程中应提供进度反馈和错误处理
- 考虑使用Web Worker处理大文件避免界面卡顿
