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

Uppy Box 插件

@uppy/box 插件允许用户从他们的 Box 账户导入文件。

何时使用此插件？

当你想让用户从他们的 Box 账户导入文件时。

使用 Box 插件需要一个 Companion 实例。Companion 处理与 Box 的身份验证、下载文件，并将其上传到目标位置。这节省了用户的带宽，特别是当他们使用移动网络连接时非常有用。

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

安装

  • npm

    npm install @uppy/box

  • yarn

    yarn add @uppy/box

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

使用方法

使用 Box 需要在 Uppy 和 Companion 中进行设置。

在 Uppy 中使用

import Uppy from "@uppy/core";
import Dashboard from "@uppy/dashboard";
import Box from "@uppy/box";

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

new Uppy()
  .use(Dashboard, { inline: true, target: "#dashboard" })
  .use(Box, { companionUrl: "https://your-companion.com" });

在 Companion 中使用

你可以在 Box 开发者网站 创建一个 Box 应用 。

需要注意的点：

  • 选择 Custom App 并选择 User Authentication (OAuth 2.0) 应用类型。
  • 你必须启用完全写入权限，否则会遇到 下载文件时的 403 错误

你将被重定向到应用页面。这个页面列出了客户端 ID（应用密钥）和客户端秘密（应用秘密），你应该使用这些来配置 Companion。

应用页面有一个 "Redirect URIs" 字段。在这里添加：

https://$YOUR_COMPANION_HOST_NAME/box/redirect

如果你使用的是 Transloadit 托管的 Companion：

https://api2.transloadit.com/companion/box/redirect

最初，你只能用自己的账户进行集成。确保在发布应用前在应用页面上申请生产状态，否则你的用户将无法登录！

配置 Box 密钥和秘密。对于独立的 Companion 服务器，指定环境变量：

export COMPANION_BOX_KEY="Box API 密钥"
export COMPANION_BOX_SECRET="Box API 秘密"

当使用 Companion Node.js API 时，配置这些选项：

companion.app({
  providerOptions: {
    box: {
      key: "Box API 密钥",
      secret: "Box API 秘密",
    },
  },
});

API

选项

id

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

title

在 UI 中显示的标题/名称，如 Dashboard 标签（ string，默认值：'Box' ）。

target

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

companionUrl

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

companionHeaders

应随每个请求一起发送到 Companion 的自定义头（ Object，默认值：{} ）。

  • companionAllowedHosts

允许的合法和授权 URL，用于接收 OAuth 响应（ string、RegExp或Array，默认值：companionUrl ）。

此值可以是 string、RegExp 模式，或是两者的 Array 。当你在多个主机上运行 Companion 时，这非常有用。否则，默认值应该足够好。

  • companionCookiesRule

此选项对应于 RequestCredentials 值（ string，默认值：'same-origin' ）。

它告诉插件是否应向 Companion 发送 cookies。

  • locale
export default {
  strings: {
    pluginNameBox: "Box",
  },
};
在本文档中