React + Node 实现大文件分片上传、断点续传、秒传[多个文件]

效果图：

QQ20221129-170230-HD

react

1. html

    <div style={
  { padding: 30 }}>
      <h1>
        React + Node 实现大文件分片上传、断点续传、秒传[多个文件]：
        <input ref={inputRef} type="file" id="file" multiple />
        <Button type="primary" onClick={() => inputRef.current.click()}>
          上传
        </Button>
      </h1>

      {state.checkPercentList.length > 0 && (
        <div>
          <h3 style={
  { width: 200 }}>读取文件：</h3>
          <div style={
  { display: 'flex', flexWrap: 'wrap' }}>
            {state.checkPercentList.map((c) => (
              <div style={
  { width: '20%' }} key={c.name}>
                文件名：{c.name}
                <br />
                <Progress style={
  { width: '90%' }} percent={c.progress} />
              </div>
            ))}
          </div>
        </div>
      )}

      {state.uploadPercentList.length > 0 && (
        <div>
          <h3 style={
  { width: 200 }}>上传文件进度：</h3>
          <div style={
  { display: 'flex', flexWrap: 'wrap' }}>
            {state.uploadPercentList.map((c) => (
              <div style={
  { width: '20%' }} key={c.name}>
                文件名：{c.name}
                <br />
                <Progress style={
  { width: '90%' }} percent={c.progress} />
              </div>
            ))}
          </div>
        </div>
      )}
    </div>

2. 上传文件(多文件)

  useEffect(() => {
    // if (renderRef.current) {
    //   renderRef.current = false;
    //   return;
    // }

    const changeFile = ({ target }) => {
      dispatch({ type: 'clearAll' });

      for (let i = 0; i < target.files.length; i++) {
        dispatch({ type: 'init'