Vue3+Ant-design-vue+SSE实现实时进度条

1. 背景：上传完后 实时显示进度条 方便业务员知道当前上传的进度
2. 实现方式：使用sse方式
3. sse只支持get请求方式 不支持post请求
4. 具体代码实现
5. html 代码片段

<div class="progress-container"><a-progress v-if="uploadProgress.show" :percent="uploadProgress.percent" :status="uploadProgress.status" class="mt30" />
</div>// 添加进度状态const uploadProgress = ref({show: false,percent: 0,text: '等待上传...',status: 'active', // active | exception | success});使用sse需要写一个唯一id 我用的是当前时间 肯定是唯一的
taskId = `import_${Date.now()}_${Math.floor(Math.random() * 1000)}`;具体使用方法
const eventSource = new EventSource(url);
url就是后端提供接口 后面拼上/${taskId.value}
eventSource.addEventListener('progress', (event) => {const data = JSON.parse(event.data);console.log(`进度: ${data.progress}%`, data.message);uploadProgress.value.percent = data.progress;});eventSource.addEventListener('complete', (event) => {console.log('导入完成！');const data = JSON.parse(event.data);console.log('进度=' + event.progress + '%', data);uploadProgress.value.percent = data.progress;eventSource.close(); // 关闭连接});

7.其实也可以使用上传组件的进度事件 但是这个不是真正文件夹上传走的那个进度 所以我们这边采用了sse方式去实现