Uppy 拖放功能

@uppy/drag-drop 插件用于渲染文件选择的拖放区域。

何时使用

当你只想将本地设备作为文件源，不需要文件预览和编辑元数据的 UI，或者 Dashboard 过于复杂时，这个插件会很有用。但有时它也可能过于简单。默认情况下，它不会显示已添加文件的状态，也没有进度条。

安装

npm
```
npm install @uppy/core @uppy/drag-drop
```
yarn
```
yarn add @uppy/core @uppy/drag-drop
```

CDN

谨慎

此捆绑包包含了大部分Uppy插件，因此不建议在生产环境中使用此方法，因为尽管您可能仅仅用到其中一小部分插件，但用户却需要下载全部插件。
然而，这对于加速您的开发环境非常有帮助，所以在起步阶段，请放心使用它来提升开发速度。

<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v3.27.3/uppy.min.css" rel="stylesheet">

<!-- 2. Initialize -->
<div id="uppy"></div>

<script type="module">
    import { Uppy, DragDrop } from "https://releases.transloadit.com/uppy/v3.27.3/uppy.min.mjs"
    const uppy = new Uppy()
    uppy.use(DragDrop, { target: '#uppy' })
</script>

使用

import Uppy from "@uppy/core";
import DragDrop from "@uppy/drag-drop";

import "@uppy/core/dist/style.min.css";
import "@uppy/drag-drop/dist/style.min.css";

new Uppy().use(DragDrop, { target: "#drag-drop" });

INFO

Uppy 设置中的某些限制，特别是 maxNumberOfFiles 和 allowedFileTypes，会影响到系统文件选择对话框的行为。如果 maxNumberOfFiles 设置为 1 ，用户将只能选择一个文件；而 allowedFileTypes 设置为 ['video/*', '.gif'] 意味着只有视频文件或 GIF 文件（扩展名为 .gif 的文件）将是可选的。

API

选项

`id`

此插件的唯一标识符（ string，默认值：'DragDrop' ）。

如果你需要添加多个 DragDrop 实例时，使用这个参数。

`target`

放置拖放区域的 DOM 元素、CSS 选择器或插件（ string 或 Element，默认值：null ）。

`width`

拖放区域的宽度（ string，默认值：'100%' ）。

设置为内联 CSS，因此可以自由使用百分比、像素或其他喜欢的值。

`height`

拖放区域的高度（ string，默认值：'100%' ）。

设置为内联 CSS，因此可以自由使用百分比、像素或其他喜欢的值。

`note`

可选地，指定一段文字来向用户解释上传的相关信息（ string，默认值：null ）。

这是用来说明设置的任何 限制 的好地方。例如：'仅限图片和视频，2-3个文件，最多1MB' 。

`locale`

export default {
  strings: {
    // 在可拖放区域显示的文本。
    // `%{browse}` 将被替换为打开系统文件选择对话框的链接。
    dropHereOr: "在此处拖放或 %{browse}",
    // 用作打开系统文件选择对话框的链接的标签。
    browse: "浏览",
  },
};

`onDragOver(event)`

ondragover 事件处理器的回调函数。

`onDragLeave(event)`

ondragleave 事件处理器的回调函数。

`onDrop(event)`

ondrop 事件处理器的回调函数。

Uppy 拖放功能

何时使用

安装

使用

API

选项

id

target

width

height

note

locale

onDragOver(event)

onDragLeave(event)

onDrop(event)

在本文档中