Uppy Vue 集成

Uppy UI 插件的 Vue 组件。

安装

• npm

  npm install @uppy/vue
  

• yarn

  yarn add @uppy/vue
  

注意

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

使用

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

• <Dashboard /> 渲染 @uppy/dashboard 为内联元素
• <DashboardModal /> 渲染 @uppy/dashboard 为一个模态窗
• <DragDrop /> 渲染 @uppy/drag-drop
• <ProgressBar /> 渲染 @uppy/progress-bar
• <StatusBar /> 渲染 @uppy/status-bar

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

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

  // 不要忘记CSS：核心和UI组件+您正在使用的插件
  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>

<template>
  <Dashboard :uppy="uppy" />
</template>