Uppy 文件选择

@uppy/file-input 插件提供了最基础的文件选择界面——它显示一个按钮，点击后会打开浏览器的文件选择器。

何时使用？

当您希望用户以最少的界面从本地机器中选择文件时。

安装

npm
```
npm install @uppy/file-input
```
yarn
```
yarn add @uppy/file-input
```

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, FileInput } from "https://releases.transloadit.com/uppy/v3.27.3/uppy.min.mjs"
  	const uppy = new Uppy()
  	uppy.use(FileInput, { target: document.body })
  </script>

使用

import Uppy from "@uppy/core";
import FileInput from "@uppy/file-input";

import "@uppy/core/dist/style.min.css";
import "@uppy/file-input/dist/style.css";

new Uppy().use(FileInput, { target: "#uppy-file-input" });

提示

@uppy/file-input 插件包含了一些基本样式，用于配合 pretty 选项使用，如示例中所示（示例）。您也可以选择不使用这些样式，而提供自己的样式。
首先从 @uppy/core/dist/style.css 导入核心样式，然后添加来自 @uppy/file-input/dist/style.css 的文件输入样式。同一路径下也提供了一个压缩版，名为 style.min.css。导入方式取决于您的构建系统。

API

选项

`id`

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

`title`

配置在 UI 中显示的标题/名称，例如，在 Dashboard 标签上（ string，默认值：'文件输入' ）。

`target`

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

`pretty`

当为真时，显示一个经过样式的按钮，点击后会打开文件选择器界面。当为假时，显示一个普通的浏览器 <input type="file"> 元素（ boolean，默认值：true ）。

`inputName`

对于 <input type="file"> 元素的 name 属性（ string，默认值：'files[]' ）。

`locale`

export default {
  strings: {
    // 相同的键被 @uppy/robodog 的 `form()` API 用于相同目的，但我们的
    // 本地化包脚本无法在 Robodog 中访问它。如果在这里更新，也应该在那里更新！
    chooseFiles: "选择文件",
  },
};

自定义文件输入

如果您不喜欢 @uppy/file-input 渲染的按钮外观/感觉，可以自由地不使用该插件，而是在页面上使用自己的自定义按钮，如下所示：

<input type="file" id="my-file-input" />

然后添加这段 JS 来将其连接到 Uppy:

const uppy = new Uppy(/* ... */);
const fileInput = document.querySelector("#my-file-input");

fileInput.addEventListener("change", (event) => {
  const files = Array.from(event.target.files);

  files.forEach((file) => {
    try {
      uppy.addFile({
        source: "文件输入",
        name: file.name,
        type: file.type,
        data: file,
      });
    } catch (err) {
      if (err.isRestriction) {
        // 处理限制
        console.log("限制错误:", err);
      } else {
        // 处理其他错误
        console.error(err);
      }
    }
  });
});

// 在上传后或文件被移除时清空 `<input>`，以便文件可以再次上传（见
// https://github.com/transloadit/uppy/issues/2640#issuecomment-731034781）。
uppy.on("file-removed", () => {
  fileInput.value = null;
});

uppy.on("complete", () => {
  fileInput.value = null;
});

Uppy 文件选择

何时使用？

安装

使用

API

选项

id

title

target

pretty

inputName

locale