O JavaScript front-end obtém o progresso do upload do arquivo para exibir a barra de progresso

parte HTML

// 本段是 React 写法
<div className='progress tea-mt-3n'>
   <div style={
   
   { width: progressWidth + '%' }} className='child'></div>
</div>

parte css

.progress {
    height: 20px;
    border: 1px solid rgba(176, 176, 176, 0.46);
    .child {
      height: 100%;
      background-color: #01c032;
    }
  }

parte do corpo da função 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);
  }

Se você gostou, por favor, curta e siga!!!Se tiver alguma dúvida, deixe uma mensagem, mensagem privada. Obrigado pelo apoio!