求助：不使用第三方库的React Excel文件拖拽上传功能失效

原代码存在的问题 #

• input[type="file"]错误监听了onDrop事件，原生文件选择框的正确触发事件是onChange
• 拖拽到label区域时未阻止浏览器默认行为，导致drop事件无法正常触发
• 未限制仅允许Excel文件上传，无法过滤非目标格式文件
• 拖拽事件中未做文件存在性判断，可能出现空值报错

修正后的完整代码 #

import React from 'react';

export function App() {
  const fileRef = React.useRef(null);

  // 处理点击选择文件
  const onChangeHandler = (e) => {
    if (e.target.files && e.target.files[0]) {
      handleFile(e.target.files[0]);
    }
  };

  // 处理拖拽放下文件
  const handleDrop = (e) => {
    e.preventDefault();
    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
      handleFile(e.dataTransfer.files[0]);
    }
  };

  // 通用文件处理逻辑（包含Excel格式验证）
  const handleFile = (file) => {
    // 定义Excel文件的MIME类型和后缀
    const allowedExcelTypes = [
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // .xlsx
      'application/vnd.ms-excel' // .xls
    ];
    const allowedExtensions = ['.xlsx', '.xls'];
    
    // 双重验证文件格式
    const fileExtension = '.' + file.name.split('.').pop().toLowerCase();
    if (!allowedExcelTypes.includes(file.type) && !allowedExtensions.includes(fileExtension)) {
      alert('请上传Excel文件（支持.xlsx、.xls格式）');
      return;
    }

    console.log('已选中Excel文件:', file);
    // 此处可添加文件读取、上传后端等后续逻辑
  };

  // 阻止浏览器默认拖拽行为，确保drop事件能触发
  const handleDragOver = (e) => {
    e.preventDefault();
  };

  const onButtonClick = () => {
    fileRef.current.click();
  };

  return (
    <div className="App">
      {/* 隐藏原生文件选择框 */}
      <input
        type="file"
        className="inputFile"
        name="file"
        onChange={onChangeHandler}
        ref={fileRef}
        id="input-file-upload"
        style={{ display: 'none' }}
        accept=".xlsx,.xls" // 前端限制文件选择格式
      />
      {/* 拖拽交互区域 */}
      <label
        htmlFor="input-file-upload"
        id="label-file-upload"
        onDrop={handleDrop}
        onDragOver={handleDragOver}
        style={{
          border: '2px dashed #888',
          borderRadius: '8px',
          padding: '2.5rem',
          textAlign: 'center',
          cursor: 'pointer',
          display: 'block',
          maxWidth: '450px',
          margin: '0 auto 1.5rem',
          backgroundColor: '#f9f9f9'
        }}
      >
        <button
          style={{ 
            display: "block", 
            margin: "0 auto 1rem", 
            padding: '0.6rem 1.2rem',
            border: 'none',
            borderRadius: '4px',
            backgroundColor: '#2196f3',
            color: 'white',
            cursor: 'pointer'
          }}
          onClick={onButtonClick}
        >
          选择Excel文件
        </button>
        或直接拖拽Excel文件到此处
      </label>
      <button 
        style={{ 
          padding: '0.6rem 1.2rem',
          border: 'none',
          borderRadius: '4px',
          backgroundColor: '#4caf50',
          color: 'white',
          cursor: 'pointer'
        }}
      >
        提交
      </button>
    </div>
  );
}

关键修改说明 #

• 格式限制：通过accept属性前端限制文件选择，同时在handleFile中通过MIME类型和后缀双重验证，避免用户绕过格式限制
• 事件修复：将input的onDrop改为onChange，这是原生文件选择框的标准触发事件
• 拖拽行为处理：添加onDragOver事件并调用e.preventDefault()，阻止浏览器自动打开文件的默认行为，确保drop事件正常触发
• 逻辑统一：将点击选择和拖拽上传的文件处理逻辑合并到handleFile，减少代码冗余
• UI优化：隐藏原生input，美化拖拽区域样式，提升交互体验

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