React-Dropzone插件开发指南：自定义文件获取逻辑-CSDN博客

本文链接：https://blog.csdn.net/gitblog_01103/article/details/148415085

React-Dropzone插件开发指南：自定义文件获取逻辑

react-dropzone Simple HTML5 drag-drop zone with React.js. 项目地址: https://gitcode.com/gh_mirrors/re/react-dropzone

理解getFilesFromEvent插件机制

React-Dropzone提供了一个强大的插件机制，允许开发者通过getFilesFromEvent属性来自定义文件获取逻辑。这个功能特别适合需要处理特殊拖放场景或需要增强文件对象属性的情况。

核心概念解析

getFilesFromEvent的作用

getFilesFromEvent是一个回调函数，它接收拖放事件(event)作为参数，并返回一个Promise，该Promise解析为一个文件对象数组。这个机制允许你：

自定义处理拖放的文件系统对象
实现文件夹拖放等高级功能
扩展文件对象的属性

返回值要求

必须返回Promise
Promise解析结果必须是File对象数组
或者DataTransferItem对象数组(当数据不可访问时)
不符合要求的返回值将被丢弃

实际应用示例

基础实现

下面是一个基本的实现示例，展示了如何扩展文件对象属性：

import React from 'react';
import {useDropzone} from 'react-dropzone';

function CustomDropzone(props) {
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone({
    getFilesFromEvent: event => customFileHandler(event)
  });

  // 渲染文件列表
  const files = acceptedFiles.map(f => (
    <li key={f.name}>
      {f.name} - 自定义属性: {f.customProp ? '是' : '否'}
    </li>
  ));

  return (
    <section className="container">
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p>拖放文件到这里，或点击选择文件</p>
      </div>
      <aside>
        <h4>已选文件</h4>
        <ul>{files}</ul>
      </aside>
    </section>
  );
}

async function customFileHandler(event) {
  const files = [];
  const fileList = event.dataTransfer ? event.dataTransfer.files : event.target.files;

  for (let i = 0; i < fileList.length; i++) {
    const file = fileList.item(i);
    
    // 使用defineProperty添加自定义属性
    Object.defineProperty(file, 'customProp', {
      value: true
    });

    files.push(file);
  }

  return files;
}

关键点说明

属性扩展方法：必须使用Object.defineProperty来添加自定义属性，这样可以确保属性是可枚举的，能够通过React-Dropzone的内部过滤。
异步处理：虽然示例中是同步处理，但实际可以在这里实现异步操作，如解析文件夹内容等。
事件来源判断：需要同时处理拖放(dataTransfer)和点击选择(target.files)两种文件来源。