如何在 ReactJS 中显示上传或下载百分比

在 ReactJS 中，我们可以使用第三方库来帮助我们轻松地显示上传或下载百分比。

使用 react-filepond 显示上传百分比

react-filepond 是一个用于构建文件上传组件的 React 工具，它提供了一个 ProgressBar 组件，用于显示上传进度百分比。

安装 react-filepond

使用 npm 安装 react-filepond：

npm install react-filepond --save

使用 ProgressBar 组件显示上传进度

使用 ProgressBar 组件可以轻松显示上传进度百分比。下面是一个示例：

import React, { useState } from 'react';
import { FilePond, ProgressBar } from 'react-filepond';
import 'filepond/dist/filepond.min.css';

function FileUpload() {
  const [progress, setProgress] = useState(0);
  
  const handleInit = () => {
    console.log('FilePond初始化完成！');
  };
  
  const handleProgress = (file, progress) => {
    setProgress(progress);
  };
  
  return (
    <div>
      <FilePond server="/api/"
                oninit={handleInit}
                onprogress={handleProgress} />
      <ProgressBar progress={progress} />
    </div>
  );
}

export default FileUpload;

在上面的例子中，我们使用 React 的 useState 钩子来定义一个状态变量 progress，然后在 handleProgress 回调函数中设置 progress 的值，以便在 ProgressBar 组件中更新进度百分比。

使用 react-progress-button 显示下载百分比

react-progress-button 是一个用于构建漂亮的 React 下载按钮的工具，它提供了一个 PercentButton 组件，用于显示下载进度百分比。

安装 react-progress-button

使用 npm 安装 react-progress-button：

npm install react-progress-button --save

使用 PercentButton 组件显示下载进度

使用 PercentButton 组件可以轻松显示下载进度百分比。下面是一个示例：

import React, { useState } from 'react';
import { PercentButton } from 'react-progress-button';
import 'react-progress-button/react-progress-button.css';

function FileDownload() {
  const [progress, setProgress] = useState(0);
  
  const handleDownload = () => {
    setProgress(0);
    fetch('/api/download')
      .then(response => {
        const contentLength = response.headers.get('Content-Length');
        const total = parseInt(contentLength, 10) || 0;
        setProgress(0.1);
        const reader = response.body.getReader();
        let receivedLength = 0;
        let chunks = [];
        const pushChunk = chunk => {
          chunks.push(chunk);
          receivedLength += chunk.length;
          setProgress((receivedLength / total).toFixed(2));
        };
        const readChunk = () => {
          reader.read().then(({ value, done }) => done
              ? chunks.length > 1 ? new Blob(chunks) : chunks[0]
              : pushChunk(value) && readChunk());
        };
        readChunk().then(blob => {
          setProgress(1);
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = 'example.zip';
          a.click();
          window.URL.revokeObjectURL(url);
        });
      });
  };
  
  return (
    <PercentButton onClick={handleDownload} percent={progress * 100}>
      下载文件
    </PercentButton>
  );
}

export default FileDownload;

在上面的例子中，我们使用 React 的 useState 钩子来定义一个状态变量 progress，然后在 handleDownload 回调函数中设置 progress 的值，以便在 PercentButton 组件中更新进度百分比。我们使用 fetch API 下载文件并监控下载进度，直到下载完成后在客户端生成一个下载按钮。