Uppy Svelte 集成

Uppy UI 插件的 Svelte 组件。

安装

• npm

  npm install @uppy/svelte
  

• yarn

  yarn add @uppy/svelte
  

注意

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

使用

以下插件可用作 Svelte 组件包装器：

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

无需使用 .use() 将 UI 插件添加到 Uppy 实例中，而是可以将 Uppy 实例作为 uppy 属性传递给组件。由于 Svelte 处理响应式的方式，您可以像使用原生 JavaScript 一样初始化 Uppy。

<script>
	import { Dashboard } from '@uppy/svelte';
	import Uppy from '@uppy/core';
	import Webcam from '@uppy/webcam';

	// Don't forget the CSS: core and UI components + plugins you are using
	import '@uppy/core/dist/style.css';
	import '@uppy/dashboard/dist/style.css';
	import '@uppy/webcam/dist/style.css';

	const uppy = new Uppy().use(Webcam);
</script>

<main><Dashboard uppy={uppy} /></main>