图片上传步骤条

页面展示

{uploadStatus === 'uploading' ? (
  <div className="img-box mt">
    <img className="imgs" src={uplaodingImg} />
    <div
      className="uploading-mask"
      style={{
        top: `${imgProcess}%`,
      }}
    />
  </div>
) : null}

获取进度条长度方法

const [imgProcess, setImgProcess] = useState(0); // 上传进度
const [uploadStatus, setUploadStatus] = useState(''); // 上传状态
const [uplaodingImg, setUplaodingImg] = useState(''); // 上传中的图片
let timer: unknown; // 定时器
let status = ''; // 上传状态（解决异步用的）

// 上传进度条
function runner() {
  const step = 10;
  let interval = 800;
  let process = 0;
  return () => {
    timer = setInterval(() => {
      // 进度条到达90%，仍未上传完成，暂停进度条
      if (process >= 90 && status === 'uploading') {
        return;
      }
      // 上传完成加快进度条速度
      if (status === 'finsih') {
        interval = 10;
      }
      // 进度条加载完毕
      if (process >= 100) {
        clearInterval(timer);
        return;
      }
      process += step;
      setImgProcess(process);
    }, interval);
  };
}

调用

setUploadStatus('uploading');
status= 'uploading';
runner()();