Uppy React 集成

适用于 Uppy UI 插件的 React 组件和一个 useUppyState 钩子。

安装

• npm

  npm install @uppy/react
  

• yarn

  yarn add @uppy/react
  

注意

你还需安装你想使用的 UI 插件。例如，@uppy/dashboard。

使用

@uppy/react 导出了 Dashboard、DragDrop 以及所有其他 UI 元素的组件封装。这些组件可与 React 或 API 兼容的替代品（ 如 Preact ）一起使用。

组件

以下组件从 @uppy/react 中导出：

• <Dashboard /> 渲染 @uppy/dashboard
• <DragDrop /> 渲染 @uppy/drag-drop
• <ProgressBar /> 渲染 @uppy/progress-bar
• <StatusBar /> 渲染 @uppy/status-bar

示例

示例：基本组件

这里我们有一个基本组件，它将 Uppy 的状态绑定到组件上。这意味着您可以渲染多个实例。但请注意，当您的组件卸载时（例如，用户导航到另一个页面），Uppy 的状态将会丢失，上传也会停止。

注意

如果渲染多个 Uppy 实例，请确保为每个实例提供一个唯一的 id。

import React, { useEffect, useState } from "react";
import Uppy from "@uppy/core";
import Webcam from "@uppy/webcam";
import { Dashboard } from "@uppy/react";

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

function Component() {
  // 重要：传递初始化函数以防止 Uppy 在每次渲染时重新实例化。
  const [uppy] = useState(() => new Uppy().use(Webcam));

  return <Dashboard uppy={uppy} />;
}

示例：在页面间导航时保持 Uppy 状态和上传

当您希望 Uppy 的状态在页面间导航时持久化并保持上传时，您可以 提升状态 。

import React, { useState, useEffect } from "react";
import Uppy from "@uppy/core";
import { Dashboard } from "@uppy/react";

function Page1() {
  // ...
}

function Page2({ uppy }) {
  return (
    <>
      <p>{totalProgress}</p>
      <Dashboard id="dashboard" uppy={uppy} />
    </>
  );
}

export default function App() {
  // 在用户切换上传期间保持 Uppy 实例存活
  const [uppy] = useState(() => new Uppy());

  return (
    // 在此处添加您的路由器
    <>
      <Page1 />
      <Page2 uppy={uppy} />
    </>
  );
}

示例：根据属性动态更新 Uppy 的选项

// ...
function Component(props) {
  // 重要：传递初始化函数以防止状态被重新创建。
  const [uppy] = useState(() => new Uppy().use(Webcam));

  useEffect(() => {
    uppy.setOptions({ restrictions: props.restrictions });
  }, [props.restrictions]);

  useEffect(() => {
		uppy.getPlugin('Webcam').setOptions({ modes: props.webcamModes });
	}, [props.webcamModes]);

	return <Dashboard uppy={uppy} />;
}

示例：为 Transloadit 动态生成参数和签名

当进入生产环境时，务必设置 signature 。不使用 签名认证可能存在安全风险 。签名认证是一种安全措施，可以防止外部人员篡改您的组装指令 。

生成签名应在服务器端完成，以避免泄露秘密。在 React 中，这可能需要在 useEffect 中进行 fetch 并将其设置给 useState ，显得有些笨拙。相反，使用 assemblyOptions 选项来 fetch 参数会更加简单 。

// ...
function createUppy(userId) {
	return new Uppy({ meta: { userId } }).use(Transloadit, {
		async assemblyOptions(file) {
      		// 您可以发送元数据供模板使用。
      		// https://transloadit.com/docs/topics/assembly-instructions/#form-fields-in-instructions
			const body = JSON.stringify({ userId: file.meta.userId });
			const res = await fetch('/transloadit-params', { method: 'POST', body });
			return response.json();
		},
	});
}

function Component({ userId }) {
  	// 重要：传递初始化函数以防止Uppy在每次渲染时重新实例化。
  	const [uppy] = useState(() => createUppy(userId));

	useEffect(() => {
		if (userId) {
			// Adding to global `meta` will add it to every file.
			uppy.setOptions({ meta: { userId } });
		}
	}, [uppy, userId]);
}