项目
版本

Uppy Unsplash 插件

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

何时使用此插件?

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

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

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

  • npm

    npm install @uppy/unsplash
    
  • yarn

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

使用方法

使用 Unsplash 需要在 Uppy 和 Companion 中都进行配置。

在 Uppy 中使用

import Uppy from "@uppy/core";
import Dashboard from "@uppy/dashboard";
import Unsplash from "@uppy/unsplash";

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

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

在 Companion 中使用

你可以在 Unsplash 开发者网站 创建一个 Unsplash 应用。完成后,你将被重定向到应用页面,该页面列出了应用密钥和应用秘密。

配置 Unsplash 密钥和秘密。对于独立的 Companion 服务器,指定环境变量:

export COMPANION_UNSPLASH_KEY="Unsplash API 密钥"
export COMPANION_UNSPLASH_SECRET="Unsplash API 秘密"

当使用 Companion Node.js API 时,配置这些选项:

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

API

选项

id

此插件的唯一标识符( string,默认:'Unsplash' )。

title

在 UI 中显示的标题/名称,如 Dashboard 标签( string,默认:'Unsplash' )。

target

放置拖放区域的 DOM 元素、CSS 选择器或插件( stringElementFunction,或 UIPlugin,默认:Dashboard )。

companionUrl

指向 Companion 实例的 URL( string,默认:null )。

companionHeaders

应随每个请求一起发送到 Companion 的自定义头( Object,默认:{} )。

companionAllowedHosts

应接受 OAuth 响应的有效且授权的 URL( stringRegExp,或 Array,默认:companionUrl )。

此值可以是 stringRegExp 模式,或两者的 Array。如果你的 Companion 在多个主机上运行,这非常有用。否则,默认值应该足够。

companionCookiesRule

这个选项对应于 RequestCredentials 值string,默认:'same-origin' )。

这告诉插件是否向 Companion 发送 cookie。

locale

export default {
  strings: {
    pluginNameUnsplash: "Unsplash",
  },
};
在本文档中