如何使用react-use-file-upload管理多个file类型输入框？

我正在使用react-use-file-upload库，官方示例针对的是单文件上传场景，但我的组件里有多个独立的<input type="file">输入框，需要用这个库统一管理所有文件输入。以下是两种可行的解决方案：

方案1：为每个输入框创建独立的钩子实例 #

这种方式最直观，每个输入框对应独立的文件管理上下文，互不干扰，适合输入框数量较少的场景。

import React, { useRef } from 'react';
import axios from 'axios';
import useFileUpload from 'react-use-file-upload';

const MultiUpload = () => {
  // 为每个输入框初始化独立的useFileUpload实例
  const { 
    files: profileFiles, 
    setFiles: setProfileFiles 
  } = useFileUpload();
  
  const { 
    files: resumeFiles, 
    setFiles: setResumeFiles 
  } = useFileUpload();
  
  const profileInputRef = useRef();
  const resumeInputRef = useRef();

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    const formData = new FormData();
    // 按输入框用途添加文件到FormData
    if (profileFiles.length > 0) {
      formData.append('profile', profileFiles[0]);
    }
    if (resumeFiles.length > 0) {
      formData.append('resume', resumeFiles[0]);
    }

    try {
      await axios.post('https://your-api-endpoint.com', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      });
      console.log('文件提交成功');
    } catch (error) {
      console.error('文件提交失败:', error);
    }
  };

  return (
    <div>
      <h2>多独立文件输入示例</h2>
      
      {/* 头像上传输入框 */}
      <div>
        <label>上传头像:</label>
        <button onClick={() => profileInputRef.current.click()}>选择文件</button>
        <input
          ref={profileInputRef}
          type="file"
          accept="image/*"
          style={{ display: 'none' }}
          onChange={(e) => {
            setProfileFiles(e, 'r'); // 'r'表示替换当前输入框的现有文件
            profileInputRef.current.value = null; // 重置输入框，允许重复选择同一文件
          }}
        />
        {profileFiles.length > 0 && <p>已选择: {profileFiles[0].name}</p>}
      </div>

      {/* 简历上传输入框 */}
      <div style={{ marginTop: '20px' }}>
        <label>上传简历:</label>
        <button onClick={() => resumeInputRef.current.click()}>选择文件</button>
        <input
          ref={resumeInputRef}
          type="file"
          accept=".pdf,.doc,.docx"
          style={{ display: 'none' }}
          onChange={(e) => {
            setResumeFiles(e, 'r');
            resumeInputRef.current.value = null;
          }}
        />
        {resumeFiles.length > 0 && <p>已选择: {resumeFiles[0].name}</p>}
      </div>

      <button onClick={handleSubmit} style={{ marginTop: '20px' }}>提交所有文件</button>
    </div>
  );
};

export default MultiUpload;

方案2：用命名空间分组管理所有文件 #

如果输入框数量较多，不想重复调用钩子，可以通过命名空间标记每个输入框的文件，实现单钩子实例下的分组管理。

import React, { useRef } from 'react';
import axios from 'axios';
import useFileUpload from 'react-use-file-upload';

const MultiUpload = () => {
  const { files, setFiles, clearAllFiles } = useFileUpload();
  
  // 存储所有输入框的ref
  const inputRefs = {
    profile: useRef(),
    resume: useRef(),
    portfolio: useRef()
  };

  // 根据命名空间筛选对应输入框的文件
  const getFilesByNamespace = (namespace) => {
    return files.filter(file => file.namespace === namespace);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    const formData = new FormData();
    // 按命名空间分组添加文件
    getFilesByNamespace('profile').forEach(file => formData.append('profile', file));
    getFilesByNamespace('resume').forEach(file => formData.append('resume', file));
    getFilesByNamespace('portfolio').forEach(file => formData.append('portfolio[]', file));

    try {
      await axios.post('https://your-api-endpoint.com', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      });
      console.log('文件提交成功');
      clearAllFiles();
    } catch (error) {
      console.error('文件提交失败:', error);
    }
  };

  // 通用文件选择处理函数
  const handleFileChange = (e, namespace) => {
    // 'r'替换该命名空间下的文件（适合单文件输入），'a'表示追加（适合多文件输入）
    const appendType = namespace === 'portfolio' ? 'a' : 'r';
    setFiles(e, appendType, namespace);
    e.target.value = null;
  };

  return (
    <div>
      <h2>多文件输入（命名空间分组）示例</h2>
      
      {/* 头像上传 */}
      <div>
        <label>头像:</label>
        <button onClick={() => inputRefs.profile.current.click()}>选择文件</button>
        <input
          ref={inputRefs.profile}
          type="file"
          accept="image/*"
          style={{ display: 'none' }}
          onChange={(e) => handleFileChange(e, 'profile')}
        />
        {getFilesByNamespace('profile').length > 0 && (
          <p>已选择: {getFilesByNamespace('profile')[0].name}</p>
        )}
      </div>

      {/* 简历上传 */}
      <div style={{ marginTop: '20px' }}>
        <label>简历:</label>
        <button onClick={() => inputRefs.resume.current.click()}>选择文件</button>
        <input
          ref={inputRefs.resume}
          type="file"
          accept=".pdf,.doc,.docx"
          style={{ display: 'none' }}
          onChange={(e) => handleFileChange(e, 'resume')}
        />
        {getFilesByNamespace('resume').length > 0 && (
          <p>已选择: {getFilesByNamespace('resume')[0].name}</p>
        )}
      </div>

      {/* 作品集上传（支持多文件） */}
      <div style={{ marginTop: '20px' }}>
        <label>作品集（可多选）:</label>
        <button onClick={() => inputRefs.portfolio.current.click()}>选择文件</button>
        <input
          ref={inputRefs.portfolio}
          type="file"
          accept="image/*,.pdf"
          multiple
          style={{ display: 'none' }}
          onChange={(e) => handleFileChange(e, 'portfolio')}
        />
        {getFilesByNamespace('portfolio').length > 0 && (
          <ul>
            {getFilesByNamespace('portfolio').map(file => (
              <li key={file.name}>{file.name}</li>
            ))}
          </ul>
        )}
      </div>

      <button onClick={handleSubmit} style={{ marginTop: '20px' }}>提交所有文件</button>
    </div>
  );
};

export default MultiUpload;

方案对比 #

• 方案1：逻辑简单清晰，每个输入框独立管理，不会互相影响，适合输入框数量少的场景。
• 方案2：仅用一个钩子实例，便于统一管理所有文件，适合输入框数量多或需要批量操作的场景。

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