el-upload 多文件上传优化：如何利用 FormData 实现批量请求

1. 为什么需要优化 el-upload 的多文件上传？

在实际开发中，我们经常遇到需要批量上传文件的场景。比如用户需要一次性上传10张产品图片，或者批量导入100个Excel数据文件。如果采用默认的 el-upload 配置，每个文件都会单独发送一个HTTP请求，这不仅浪费服务器资源，还会让用户等待更长时间。

我曾经在一个电商后台管理系统项目中，遇到用户抱怨上传商品图片太慢的问题。测试发现，当用户选择50张图片时，浏览器会同时发起50个上传请求，导致服务器压力剧增，部分请求甚至因为超时失败。这就是典型的需要优化多文件上传的场景。

使用 FormData 实现批量上传的核心优势在于：

• 减少HTTP请求次数：从N个文件N次请求变为1次请求
• 降低服务器压力：避免短时间内大量并发请求
• 提升用户体验：用户只需等待一次上传完成
• 简化代码逻辑：统一处理所有文件的上传状态

2. 基础配置：让 el-upload 支持多文件选择

2.1 HTML 模板配置

首先，我们需要正确配置 el-upload 组件的基础属性：

<el-upload ref="multiUpload" :action="uploadUrl" :auto-upload="false" :multiple="true" :file-list="fileList" :on-change="handleFileChange"> <el-button size="small">选择文件</el-button> </el-upload> <el-button type="primary" @click="submitAll">开始上传</el-button>

关键参数说明：

• :auto-upload="false"：关闭自动上传，改为手动触发
• :multiple="true"：允许选择多个文件
• :file-list="fileList"：绑定文件列表数据
• ref="multiUpload"：用于后续获取组件实例

2.2 初始化数据与事件处理

在 script 部分设置初始数据和基本方法：

data() { return { uploadUrl: '/api/upload', // 上传接口地址 fileList: [], // 存储已选文件 formData: null // 用于存储FormData实例 } }, methods: { handleFileChange(file, fileList) { // 文件选择变化时的回调 this.fileList = fileList } }

3. 核心实现：使用 FormData 打包多个文件

3.1 创建 FormData 实例

当用户点击上传按钮时，我们需要将所有文件打包到一个 FormData 实例中：

submitAll() { if (this.fileList.length === 0) { this.$message.warning('请先选择文件') return } this.formData = new FormData() // 添加文件到FormData this.fileList.forEach(file => { this.formData.append('files', file.raw) // 注意使用file.raw获取原始文件 }) // 可以添加其他表单数据 this.formData.append('userId', '12345') this.formData.append('category', 'product') this.uploadFiles() }

3.2 发送上传请求

创建上传方法，使用 axios 发送请求：

async uploadFiles() { try { const response = await axios.post(this.uploadUrl, this.formData, { headers: { 'Content-Type': 'multipart/form-data' }, onUploadProgress: progressEvent => { // 上传进度处理 const percent = Math.round( (progressEvent.loaded * 100) / progressEvent.total ) console.log(`上传进度: ${percent}%`) } }) this.$message.success('上传成功') this.fileList = [] // 清空文件列表 } catch (error) { console.error('上传失败:', error) this.$message.error('上传失败') } }

4. 高级优化技巧

4.1 大文件分片上传

对于特别大的文件，可以考虑分片上传：

async uploadChunks(file) { const chunkSize = 2 * 1024 * 1024 // 2MB分片 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) const chunkFormData = new FormData() chunkFormData.append('file', chunk) chunkFormData.append('chunkIndex', i) chunkFormData.append('totalChunks', chunks) chunkFormData.append('fileName', file.name) await axios.post('/api/upload-chunk', chunkFormData) } // 所有分片上传完成后通知服务器合并 await axios.post('/api/merge-chunks', { fileName: file.name, totalChunks: chunks }) }

4.2 并发控制与错误重试

为了避免同时上传太多文件导致浏览器卡顿，可以实现并发控制：

async uploadWithConcurrency(files, maxConcurrent = 3) { const queue = [...files] let activeUploads = 0 const results = [] while (queue.length > 0 || activeUploads > 0) { if (queue.length > 0 && activeUploads < maxConcurrent) { const file = queue.shift() activeUploads++ try { const result = await this.uploadSingleFile(file) results.push(result) } catch (error) { // 错误重试逻辑 console.error(`上传失败，尝试重试: ${file.name}`) queue.unshift(file) } finally { activeUploads-- } } else { await new Promise(resolve => setTimeout(resolve, 100)) } } return results }

5. 后端接口适配建议

5.1 Spring Boot 接收多文件示例

后端需要相应调整以接收批量上传的文件：

@PostMapping("/upload") public ResponseEntity<String> uploadFiles( @RequestParam("files") MultipartFile[] files, @RequestParam(value = "userId", required = false) String userId) { if (files == null || files.length == 0) { return ResponseEntity.badRequest().body("请选择文件"); } try { for (MultipartFile file : files) { if (!file.isEmpty()) { String filePath = "/uploads/" + file.getOriginalFilename(); file.transferTo(new File(filePath)); } } return ResponseEntity.ok("上传成功"); } catch (Exception e) { return ResponseEntity.status(500).body("上传失败: " + e.getMessage()); } }

5.2 Node.js Express 接收示例

const express = require('express') const multer = require('multer') const upload = multer({ dest: 'uploads/' }) app.post('/upload', upload.array('files'), (req, res) => { if (!req.files || req.files.length === 0) { return res.status(400).send('请选择文件') } const results = req.files.map(file => { return { originalname: file.originalname, size: file.size, mimetype: file.mimetype, path: file.path } }) res.json({ success: true, message: '上传成功', data: results }) })

6. 常见问题与解决方案

6.1 文件大小限制处理

在前端进行文件大小校验：

beforeUpload(file) { const maxSize = 10 * 1024 * 1024 // 10MB if (file.size > maxSize) { this.$message.error(`文件 ${file.name} 超过大小限制`) return false } return true }

6.2 文件类型限制

限制只能上传特定类型的文件：

<el-upload :accept="'.jpg,.jpeg,.png,.gif,.pdf,.doc,.docx'" ... >

同时在 beforeUpload 方法中验证：

beforeUpload(file) { const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf'] if (!allowedTypes.includes(file.type)) { this.$message.error('不支持的文件类型') return false } return true }

6.3 上传进度显示优化

在界面上显示上传进度条：

<el-progress :percentage="uploadPercent" v-if="isUploading" ></el-progress>

在上传方法中更新进度：

onUploadProgress: progressEvent => { this.uploadPercent = Math.round( (progressEvent.loaded * 100) / progressEvent.total ) this.isUploading = this.uploadPercent < 100 }

7. 性能优化与调试技巧

7.1 减少内存占用

处理大文件时，避免在内存中保存所有文件数据：

// 不好的做法：将所有文件内容读入内存 const fileReaders = this.fileList.map(file => { return new Promise(resolve => { const reader = new FileReader() reader.onload = () => resolve(reader.result) reader.readAsArrayBuffer(file.raw) }) }) // 好的做法：直接使用FormData流式传输 const formData = new FormData() this.fileList.forEach(file => { formData.append('files', file.raw) })

7.2 Chrome 开发者工具调试技巧

在 Chrome 开发者工具中检查 FormData 内容：

1. 打开 Network 面板
2. 找到上传请求
3. 点击 "Payload" 标签
4. 查看 FormData 部分，确保所有文件和其他字段正确添加

7.3 上传速度测试与优化

测试不同配置下的上传速度：

// 测试代码示例 async testUploadSpeed() { const testFile = new Blob([new ArrayBuffer(5 * 1024 * 1024)]) // 5MB测试文件 const formData = new FormData() formData.append('file', testFile) const startTime = performance.now() await axios.post('/api/upload-test', formData) const endTime = performance.now() const duration = (endTime - startTime) / 1000 // 转为秒 const speed = (5 / duration).toFixed(2) // MB/s console.log(`上传速度: ${speed} MB/s`) }

根据测试结果，可以考虑以下优化措施：

• 调整分片大小
• 启用Gzip压缩
• 使用CDN加速
• 优化服务器配置