React实现多文件上传表单的方案及支持自定义CSS的库推荐咨询

可自由修改CSS的优质第三方库推荐 #

优先选无头（Headless）类库，这类库只封装上传相关的逻辑，不强制注入默认UI和样式，所有DOM结构、类名、效果全由你自己控制，完全不会有改不动样式的问题：

• react-dropzone：目前生态最成熟的上传逻辑基础库，原生支持多文件选择、拖拽、文件类型/大小校验，本身没有任何默认UI，你可以完全按照自己的设计写样式。上传进度、文件列表渲染、删除项这些功能只需要配合状态管理就能实现，没有额外的样式限制。
• react-uploady：功能更全的无头上传方案，内置了文件队列管理、上传进度追踪、分块上传、断点续传的逻辑钩子，不用自己写底层上传状态管理，UI层100%自定义，不管是进度条样式还是列表项样式都可以自由调整，适合不想从零写上传逻辑、又要完全掌控样式的场景。

避坑提示：尽量不要用封装了完整默认UI的上传组件，这类组件通常需要做复杂的样式穿透才能修改默认效果，自由度很低。

从零手写实现核心要点 #

不需要依赖任何第三方库也能快速实现需求，核心逻辑拆解如下，直接照着写就能跑通：

• 文件选择能力：隐藏原生<input type="file" multiple />标签，通过ref绑定DOM，自定义上传按钮点击时触发input的原生click事件即可唤起文件选择器；监听input的change事件，拿到选中的FileList转成数组存入组件状态。如果需要拖拽上传，给外层容器绑定onDragOver、onDrop事件阻止默认行为，从drop事件的dataTransfer.files中取到拖拽的文件即可，后续逻辑和普通选择文件一致。
• 上传进度实现：不要用原生fetch发上传请求（fetch默认不支持上传进度监听），可以用axios配置onUploadProgress回调，或者直接封装原生XMLHttpRequest，监听xhr.upload.onprogress事件，通过已上传字节数/总字节数计算进度百分比，更新到对应文件项的状态中，就能渲染出自定义样式的进度条。
• 文件列表与删除能力：在上传按钮下方单独渲染列表区域，每个文件项生成唯一标识（可通过文件名+最后修改时间+文件大小生成，上传完成后也可以替换成后端返回的文件ID），每个项旁边绑定删除按钮：如果文件还在上传中，先终止对应请求再从状态数组中过滤掉当前项；如果文件已经上传完成，调用后端删除接口后再从列表移除即可。

下面是最小可运行的核心代码片段，样式可以完全自己定义：

import { useRef, useState } from 'react'

export default function MultiUploadForm() {
  const fileInputRef = useRef(null)
  const [fileList, setFileList] = useState([])

  // 唤起文件选择
  const triggerFileSelect = () => fileInputRef.current.click()

  // 处理选中的文件
  const handleFileSelect = (e) => {
    const selectedFiles = Array.from(e.target.files)
    const processedFiles = selectedFiles.map(file => ({
      uid: `${file.name}-${file.lastModified}-${file.size}`,
      rawFile: file,
      progress: 0,
      status: 'pending' // 状态可选 pending / uploading / success / error
    }))
    setFileList(prev => [...prev, ...processedFiles])
    // 此处补充上传逻辑，上传过程中更新对应uid的progress字段即可
    e.target.value = '' // 重置input值，避免重复选同个文件不触发change
  }

  // 删除列表项
  const handleRemoveFile = (uid) => {
    setFileList(prev => prev.filter(item => item.uid !== uid))
    // 若文件处于上传中，此处需要调用对应请求的abort方法终止上传
  }

  return (
    <div className="upload-container">
      <button className="upload-btn" onClick={triggerFileSelect}>
        选择多文件上传
      </button>
      {/* 隐藏原生文件选择框 */}
      <input
        type="file"
        multiple
        ref={fileInputRef}
        hidden
        onChange={handleFileSelect}
      />
      {/* 上传按钮下方的文件列表区域 */}
      <div className="file-list">
        {fileList.map(item => (
          <div key={item.uid} className="file-item">
            <span className="file-name">{item.rawFile.name}</span>
            <div className="progress-wrap">
              <div 
                className="progress-bar" 
                style={{ width: `${item.progress}%` }}
              />
            </div>
            <button className="delete-btn" onClick={() => handleRemoveFile(item.uid)}>
              删除
            </button>
          </div>
        ))}
      </div>
    </div>
  )
}

手写时的小提示：进度条、按钮、列表项的类名全部自定义，写CSS的时候没有任何限制，想实现什么设计效果都可以。

内容的提问来源于stack exchange，提问作者Drizzy