抠丁客 抠丁客
项目
版本
编辑 (2024/7/10)

Uppy 远程资源

@uppy/remote-sources 是一个预设插件（意味着它捆绑并设置了其他插件），用于向 Uppy Dashboard 添加所有可用的远程资源，如 Instagram、Google Drive、Dropbox 等，集成在一个包中。

提示

远程资源需要 Dashboard，并会自动为其安装所有插件。

何时使用它？

@uppy/remote-sources 的目标是简化设置 Companion 插件的过程，当你希望在插件之间共享配置时。如果你想让用户从 Uppy 提供的任何远程源上传文件，推荐使用此插件。

使用远程资源插件要求运行一个 Companion 实例。Companion 负责处理与远程服务（如 Facebook、Dropbox 等）的认证，下载文件，并将其上传到目标位置。这节省了用户的带宽，特别是当他们使用移动网络连接时更为有用。

你可以自托管 Companion 或者通过任意 Transloadit 计划 获取托管版本。

安装

  • npm

    npm install @uppy/remote-sources

  • yarn

    yarn add @uppy/remote-sources

  • CDN

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

使用

import Uppy from "@uppy/core";
import Dashboard from "@uppy/dashboard";
import RemoteSources from "@uppy/remote-sources";

import "@uppy/core/dist/style.min.css";
import "@uppy/dashboard/dist/style.min.css";

new Uppy()
  .use(Dashboard)
  .use(RemoteSources, { companionUrl: "https://your-companion-url" });

API

选项

id

该插件的唯一标识符（ string，默认值：RemoteSources ）。

sources

将被启用的远程资源列表（ array，默认值：['Box', 'Dropbox', 'Facebook', 'GoogleDrive', 'Instagram', 'OneDrive', 'Unsplash', 'Url', 'Zoom'] ）。

你通常不需要手动指定或更改它们，但如果你想改变它们在 Dashboard 中出现的顺序，或禁用某些资源，可以使用这个选项。

uppy.use(RemoteSources, {
  companionUrl: "https://your-companion-url",
  sources: ["Instagram", "GoogleDrive", "Unsplash", "Url"],
});

companionUrl

指向 Companion 实例的 URL（ string，默认值：null ）。

companionHeaders

每次向 Companion 发送请求时应随附的自定义头（ object，默认值：{} ）。

companionAllowedHosts

应接受 OAuth 响应的有效且授权的 URL(s)/URL 模式(s)（ string | RegExp | Array<string | RegExp>，默认值：companionUrl ）。

这个值可以是一个 string，一个 RegExp 对象，或者两者的数组。

当你有 Companion 在多个主机上运行时，这个设置非常有用。否则，默认值应该足够好。

companionCookiesRule

此选项对应于 Request.credentials 的值，告诉插件是否应向 Companion 发送 cookie（ string，默认值：same-origin ）。

target

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

在本文档中