Vue + el-upload阿里云文件上传进度条功能，阿里云文件上传切片进度条功能实现，el-upload文件上传真实进度条

### Vue + Element UI (el-upload) 阿里云文件上传进度条功能实现 #### 一、背景知识 `el-upload` 是Element UI提供的一个用于处理文件上传的组件。而阿里云OSS(Object Storage Service) 提供了稳定可靠的云端存储服务，通过API可以方便地将文件上传至指定空间，并获取返回信息。 #### 二、Vue结合El-upload实现基本上传及显示进度条 为了能够展示真实的上传进度，在使用 `el-upload` 组件时需要监听其内置事件如 `on-progress`, 并配合阿里云SDK设置回调函数来实时更新状态： ```vue <template> <div id="app"> <!-- 使用element ui 的upload组件 --> <el-upload :action="yourUploadUrl" :before-upload="handleBeforeUpload" :on-progress="handleProgress" :on-success="handleSuccess" :file-list="fileList"> 点击这里选择文件或拖拽文件到此区域 </el-upload> <!-- 显示当前正在加载的信息 --> <p v-if="percent > 0">已上传 {{ percent }}%</p> </div> </template> <script> export default { data() { return { yourUploadUrl: '', // 需要替换成实际请求地址 fileList: [], percent: 0, } }, methods:{ handleBeforeUpload(file){ this.percent = 0; // 可在此处添加对单个文件的一些验证等操作... const client = new OSS({ region: 'oss-cn-hangzhou', accessKeyId: YOUR_ACCESS_KEY_ID, // 用户AccessKey ID accessKeySecret: YOUR_ACCESS_SECRET, // 用户AccessKey Secret bucket: BUCKET_NAME // Bucket名称 }); let storeAs = file.name; // 文件保存路径 return true; }, handleProgress(event,file,fileList){ this.percent = parseInt((event.percent * 100).toFixed(2)); console.log('progress event:', event); }, handleSuccess(response,file,fileList){ alert("成功"); this.fileList.push({name:response.data}); console.log(this.fileList); } } } </script> ``` #### 三、关于大文件分片上传以及对应的进度条 对于较大体积的数据包传输来说，“一次性”的提交方式并不高效也不推荐；此时则应该考虑采用“断点续传”机制 - 将整个资源分割成若干个小部分依次发送给服务器端并记录下每个片段的具体位置，以便后续恢复中断的部分而不必从头再来一遍。 ##### 实现步骤： 1. 客户端根据设定的最大块大小(`partSize`)计算出总共分成几份； 2. 循环调用put方法逐段上送直至完成全部内容； 3. 每次接收到回应之后立即修改UI元素反映最新进展程度。 4. 如果中途遇到网络异常等问题导致流程被打断，则可以根据之前保留下来的标识符继续剩下的任务。 以下是基于上述思路的一个简化示例代码片段（仅供参考）: ```javascript async function uploadFileWithSlice(client, fileName, localFilePath) { try{ var partSize = 5 * 1024 * 1024; var result = await client.multipartUpload(fileName,{ filePath:localFilePath, meta:{'x-oss-forbid-overwrite':true}, progress:function(p,d){console.info(Math.floor(p*100)+"%");this.percent=Math.floor(p*100)} }); }catch(error){ console.error(error.message) } }; ``` 请注意这只是一个大致框架，具体应用时还需要参考官方文档完善更多细节配置项比如超时时间、并发限制等等。 希望以上内容能帮助您理解如何在项目中集成这两个强大的工具！