html 部分
// 本段是 React 写法
<div className='progress tea-mt-3n'>
<div style={{ width: progressWidth + '%' }} className='child'></div>
</div>
css 部分
.progress {
height: 20px;
border: 1px solid rgba(176, 176, 176, 0.46);
.child {
height: 100%;
background-color: #01c032;
}
}
js 函数体部分
const [uploadingFileList, setUploadingFileList] = useState([]);
const [isUploading, setIsUploading] = useState(null);
const [progressWidth, setProgressWidth] = useState(0);
function onUploadStart(file, { xhr }) {
temUploadFileList = [
...temUploadFileList,
{
id: file.id,
name: file.name,
size: file.size,
status: 'pending',
xhr: xhr,
},
];
xhr.upload.onprogress = function(e){
if(e.lengthComputable){
// 当调用函数后这里会设置进度条的宽度值, 从而实现进度条效果
setProgressWidth((e.loaded/e.total)*100);
console.log('当前上传进度'+Math.round((e.loaded/e.total)*100)+'%')
}
};
setUploadingFileList(temUploadFileList);
setIsUploading(true);
}
喜欢请点赞关注!!! 有问题请留言, 私信。感谢支持!