页面展示
{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(() => {
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()();