vue3+ts+element plus 解决进度条没有显示到100%就关闭弹窗

遇到的问题：（分片上传项目）在实现好进度条之后，根据计算，其实进度条的数值有达到100%，但是走到80%左右就开始关闭弹窗dialog，并没有显示完整就开始关闭弹框了，这样对用户体验不是很好，于是对进度条进行优化

解决办法：

• 调整进度条的更新方式： 在上传分片文件时，进度条的更新是基于分片的上传完成状态。要让进度条显得更顺滑，你可以在分片上传时，每当分片成功上传后，稍微延迟增加进度，这样进度条不会突兀地跳动。

• 在上传完成后保留进度条显示： 上传完成后，可以在对话框关闭之前，确保进度条显示完整到 100%。可以引入一个小的延时，使进度条达到 100% 后再关闭对话框，这样给用户一种上传完全完成的感觉。

• 平滑过渡到 100%： 使用 requestAnimationFrame 或者渐变方式在最后的进度条更新阶段平滑到 100%。

代码：

<div class="demo-progress"  v-show="formData.file.size > formData.chunkSize">
   <el-progress :stroke-width="10" :percentage="uploadProgress" />
</div>


--------------------------分割线--------------------------------


const uploadProgress = ref(0); // 进度条进度

// 先上传、再分片、再提交
const syncMsg = async () => {
    ......
  
      try {
        // 上传分片接口
        let res =......
            ......

         // 更新进度条
         uploadProgress.value = Math.round((currentChunk / totalChunks) * 100);

        if (uploadProgress.value < 100) {
          // 稍微延迟增加进度条的数值，模拟平滑过渡
          await new Promise(resolve => setTimeout(resolve, 50));
        }

        if (res.code == 200) {

          // 最后的进度条平滑到 100%
          uploadProgress.value = 100;
          await new Promise(resolve => setTimeout(resolve, 200)); // 延时显示100%的效果

        ......
        }
      } catch (error) {
        ......
      }

};