快捷導(dǎo)航

vue實(shí)現(xiàn)簡潔文件上傳進(jìn)度條功能

更新時(shí)間：2024年06月05日 10:26:58 作者：一天只碼五十行

這篇文章主要介紹了vue實(shí)現(xiàn)簡潔文件上傳進(jìn)度條功能,實(shí)現(xiàn)原理是通過performance.now()獲取動(dòng)畫的時(shí)間戳,用于創(chuàng)建流暢的動(dòng)畫,結(jié)合示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、效果展示

緩若江海凝清光

二、代碼

const uploadProgress = ref(); //上傳進(jìn)度
//進(jìn)度絲滑更新
//進(jìn)度，時(shí)常
const ProgressChange = (targetPercent: number, duration: number) => {
  //performance.now() 是瀏覽器提供的一個(gè)高性能時(shí)間 API，它返回一個(gè) DOMHighResTimeStamp，
  //這個(gè)時(shí)間戳提供了當(dāng)前頁面從加載到現(xiàn)在所經(jīng)過的毫秒數(shù)，具有很高的精度，適合用來測量腳本執(zhí)行時(shí)間、動(dòng)畫幀間隔等
  const startTime = performance.now();
  //獲取當(dāng)前進(jìn)度
  const startPercent = uploadProgress.value;
  const step = (currentTime: number) => {
    // 計(jì)算當(dāng)前進(jìn)度
    const elapsedTime = currentTime - startTime;
    // 修改進(jìn)度條的百分比實(shí)現(xiàn)動(dòng)畫效果
    let currentPercent = easeInOut(
      elapsedTime,
      startPercent,
      targetPercent - startPercent,
      duration
    );
    // 確保百分比不超過100且不小于0
    currentPercent = Math.min(Math.max(currentPercent, 0), 100);
    // 更新進(jìn)度條
    uploadProgress.value = Math.round(currentPercent);
    // 如果動(dòng)畫未結(jié)束，繼續(xù)執(zhí)行動(dòng)畫
    if (currentPercent < 100 && elapsedTime < duration) {
      requestAnimationFrame(step);
    } else {
      uploadProgress.value = Math.round(targetPercent); // 確保最終值準(zhǔn)確無誤
    }
  };
  // 使用函數(shù)使動(dòng)畫更加平滑
  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));
    };
  }