React拖拽组件：实现点击上传图标仅显示图片类型文件

核心思路 #

利用react-dropzone的accept配置项，自动为文件输入框生成符合要求的accept属性，让系统文件管理器默认只显示指定类型的图片文件，同时移除冗余的手动校验逻辑。

修改后的代码 #

Dropzone组件

import React from "react";
import { useDropzone } from "react-dropzone";
import UploadIcon from '@mui/icons-material/Upload';

const Dropzone = ({ onDrop, accept }) => {
    const { getRootProps, getInputProps, isDragActive } = useDropzone({
      onDrop,
      accept
    });
  
    return (
      <div className="dropzone-div" {...getRootProps()}>
        {/* 移除手动添加的accept属性，由useDropzone自动生成 */}
        <input className="dropzone-input" {...getInputProps()} />
        <div className="text-center">
           <UploadIcon fontSize="large"/>
          {isDragActive ? (
            <p className="dropzone-content">Release to drop the files here</p>
          ) : (
            <p className="dropzone-content">
             <b>Choose a file</b> or drag it here
            </p>
          )}
        </div>
      </div>
    );
  };
export default Dropzone;

App.js

import React, { useCallback, useState } from "react";
import './App.css';
import Form from './components/Form';
import DragDrop from './components/DragDrop';
import ImageList from "./components/ImageList";
import cuid from "cuid";

function App() {
  const [images, setImages] = useState([]);
  const [errorMessage, setErrorMessage] = useState('');

  // react-dropzone已自动过滤符合accept条件的文件，无需额外校验
  const onDrop = useCallback(acceptedFiles => {
    setErrorMessage('');
    acceptedFiles.map(file => {
      const reader = new FileReader();
      reader.onload = function(e) {
        setImages(prevState => [
          ...prevState,
          { id: cuid(), src: e.target.result }
        ]);
      };
      reader.readAsDataURL(file);
      return file;
    });
  }, []);

  return (
    <main className="App">
      <h2 className="App">Drag and Drop Example</h2>
      <br />
      <div className="dropzone-div">
        {/* 传入accept规则，支持image/*或具体扩展名如".gif,.jpg,.jpeg,.png" */}
        <DragDrop onDrop={onDrop} accept='image/*'/>
      </div>
      <div className="App">
        {errorMessage && <span>{errorMessage}</span>}
        <ImageList images={images} />
      </div>
    </main>
  );
}

export default App;

关键说明 #

1. 自动生成accept属性：useDropzone的accept配置会自动传递给内部的input标签，系统文件管理器会据此过滤显示文件，无需手动在input上添加accept属性。
2. 移除冗余校验：react-dropzone在文件选择/拖拽阶段已经过滤了不符合规则的文件，acceptedFiles数组仅包含允许的图片文件，无需再用正则判断扩展名。
3. 精确控制文件类型：如果需要限制特定格式，可将accept改为具体扩展名字符串（如".gif,.jpg,.jpeg,.png"）或对象格式（如{ 'image/*': ['.gif', '.jpg', '.jpeg', '.png'] }）。

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