vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue上传进度条

vue实现简洁文件上传进度条功能

作者:一天只码五十行

这篇文章主要介绍了vue实现简洁文件上传进度条功能,实现原理是通过performance.now()获取动画的时间戳,用于创建流畅的动画,结合示例代码介绍的非常详细,需要的朋友可以参考下

一、效果展示

缓若江海凝清光

二、代码

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来更新动画帧,优化显示效果。

到此这篇关于vue:实现丝滑文件上传进度条的文章就介绍到这了,更多相关vue上传进度条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文