el-upload实现切片上传

### 使用 `el-upload` 组件实现文件切片上传 为了实现在 Vue 项目中的大文件切片上传，可以利用 Element UI 的 `el-upload` 组件并结合 File API 来处理文件分割与上传操作。下面是一个详细的解决方案以及相应的示例代码。 #### 方案概述 通过监听文件选择事件，在前端使用 JavaScript 的 File API 将选中的文件按照设定好的大小进行切割形成多个片段；之后再把这些片段逐个封装进 FormData 对象里发送给后台服务器保存起来[^1]。 对于每一个分片而言，都需要携带一些额外的信息以便于后端能够识别该分片属于哪个完整的文件及其顺序位置等重要参数。通常情况下会包含如下字段： - 文件名 (`filename`) - 总分片数 (`totalChunks`) - 当前分片索引 (`chunkIndex`) - 分片数据本身 (`fileChunk`) 这些信息会被打包在一个表单对象内提交至服务端完成存储工作。 #### 示例代码 以下是基于上述描述的具体实现方式之一: ```vue <template> <div id="app"> <!-- el-upload 配置项 --> <el-upload class="upload-demo" drag :before-upload="handleBeforeUpload" action="" multiple> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> </el-upload> </div> </template> <script> export default { methods: { handleBeforeUpload(file) { const CHUNK_SIZE = 1 * 1024 * 1024; // 设置每一片为1MB let chunks = Math.ceil(file.size / CHUNK_SIZE); // 计算总共需要多少片 for (let i = 0; i < chunks; ++i) { let start = i * CHUNK_SIZE; let end = ((i + 1) * CHUNK_SIZE >= file.size ? file.size : (i + 1) * CHUNK_SIZE); this.uploadFileSlice(i, chunks, file.slice(start, end), file.name); } return false; // 返回false阻止默认行为 }, uploadFileSlice(index, total, blob, filename){ var formData = new FormData(); formData.append('file', blob); formData.append('index', index); formData.append('total', total); formData.append('name', filename); axios.post('/api/upload-slice', formData).then(response => { console.log(`第${index}片已成功上传`); }).catch(error => { console.error(`第${index}片上传失败`, error); }); } } } </script> ``` 此段代码展示了如何配置 `el-upload` 并定义了一个自定义方法来拦截文件上传过程之前的操作——即先做文件的预处理（比如这里就是指按需切割）。每当有新的文件被加入队列时就会触发这个函数执行一系列动作直到所有的部分都被妥善安置好为止。 值得注意的是这里的 `action=""` 属性为空字符串是因为实际的数据传递是由内部调用 AJAX 请求完成而不是依赖于 `<form>` 表单的传统提交机制。