是否希望能够将文件拖到Web应用程序中？遮住了。-DEV365 开发者社区

是2023年。当Web应用程序希望我们提供文件时，我们都知道这有多烦人，但只能通过单击Ye Olde <input type=file>来使其变得麻烦。所有现代浏览器都支持了一种更好的方法来实现这一目标，并且该库使在任何环境，香草或框架中使用它们是一种快点。

。

https://github.com/krofdrakula/drop/

设置

在您的依赖项中安装@krofdrakula/drop或将https://esm.sh/@krofdrakula/drop用作模块导入。

在您的页面中创建一些HTML：

<div id="drop_target" style="padding:40px;border:1px solid blue;">
  Drop files here.
</div>

在您的js中，抓住该元素并将其传递到create函数：

import { create } from '@krofdrakula/drop';

const dropTarget = document.body.getElementById("drop_target");

create(dropTarget, {
  onDrop: (files) => console.log(files)
});

在浏览器中打开页面，打开开发工具并将文件拖到您创建的元素中。

在类似反应的组件中

create()函数返回可与useRef和useEffect一起使用的清理功能，以正确设置它：

import { useRef, useEffect } from 'react';
import { create } from '@krofdrakula/drop';

const MyComponent = ({ onDrop }) => {
  const dropTarget = useRef();

  useEffect(() => {
    // you must return the returned function for it to be
    // able to clean up event handlers
    return create(dropTarget.current, { onDrop });
  }, [dropTarget.current, onDrop]);

  return <div ref={dropTarget}>Drop files here.</div>
};

方便的功能

create采用了许多选项，使您可以配置控件的行为：

它揭示了各种事件处理程序，这些事件处理程序可让您在拖动文件或没有;
它允许您指定解析器函数，允许您将文件转换到元素之前，然后将其传递给onDrop处理程序;
默认单击元素时，它使用本机文件选择器。

查看demo site以查看它在作用中，或阅读README for the Monty。

所有这些都包含在fits any application's download limits的软件包中。

发展

此软件包目前可以在我知道应该处理的情况下完成我需要的一切。如果您决定尝试一下并遇到问题，请告诉我！