vue:实现丝滑上传进度条

一、效果展示

缓若江海凝清光

.

二、代码

TypeScript 复制代码
const uploadProgress = ref(); //上传进度

//进度丝滑更新
//进度,时常
const ProgressChange = (targetPercent: number, duration: number) => {
  //performance.now() 是浏览器提供的一个高性能时间 API,它返回一个 DOMHighResTimeStamp,
  //这个时间戳提供了当前页面从加载到现在所经过的毫秒数,具有很高的精度,适合用来测量脚本执行时间、动画帧间隔等
  const startTime = performance.now();
  //获取当前进度
  const startPercent = uploadProgress.value;

  const step = (currentTime: number) => {
    // 计算当前进度
    const elapsedTime = currentTime - startTime;
    // 修改进度条的百分比实现动画效果
    let currentPercent = easeInOut(
      elapsedTime,
      startPercent,
      targetPercent - startPercent,
      duration
    );

    // 确保百分比不超过100且不小于0
    currentPercent = Math.min(Math.max(currentPercent, 0), 100);

    // 更新进度条
    uploadProgress.value = Math.round(currentPercent);

    // 如果动画未结束,继续执行动画
    if (currentPercent < 100 && elapsedTime < duration) {
      requestAnimationFrame(step);
    } else {
      uploadProgress.value = Math.round(targetPercent); // 确保最终值准确无误
    }
  };

  // 使用函数使动画更加平滑
  const easeInOut = (t: number, b: number, c: number, d: number) => {
    t /= d / 2;
    if (t < 1) return (c / 2) * t * t * t + b;
    t -= 2;
    return (c / 2) * (t * t * t + 2) + b;
  };
  requestAnimationFrame(step);
};

//选择文件
const handleFileChange = async (event: any) => {
  uploadProgress.value = 0;
  const file = event.target.files[0];
  fileNmae.value = file.name;
  if (file) {
    const reader = new FileReader();
    const updateProgress = (event: ProgressEvent) => {
      if (event.lengthComputable) {
        const totalDuration = 1000; // 1秒,单位为毫秒
        const percentComplete = (event.loaded / event.total) * 100;
        ProgressChange(percentComplete, totalDuration);
      }
    };
    reader.readAsDataURL(file);
    reader.onprogress = updateProgress;
    reader.onload = (e) => {
      if (typeof e.target?.result == "string") {
        imageUrl.value = e.target.result;
      }
      reader.onprogress = null;
      fileInfo.size = Number((file.size / 1024).toFixed(2));
    };
  }

三、实现原理

1.通过performance.now()获取动画的时间戳,用于创建流畅的动画。

2.通过一个缓动函数来实现动画的过渡效果。

3.通过requestAnimationFrame这个API来更新动画帧,优化显示效果。

相关推荐
艾小逗1 小时前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
小小小小宇4 小时前
手写 zustand
前端
Hamm5 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
明似水5 小时前
Flutter 弹窗队列管理:支持优先级的线程安全通用弹窗队列系统
javascript·安全·flutter
小小小小宇5 小时前
前端国际化看这一篇就够了
前端
大G哥6 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext6 小时前
html初识
前端·html
小小小小宇6 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827526 小时前
vue中 vue.config.js反向代理
前端
Java&Develop6 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器