Uppy Angular 集成

Angular 的 Uppy UI 插件组件。

何时使用？

当你正在使用 Angular 框架，并希望使用某个 UI 组件时。

安装

• npm

  npm install @uppy/angular
  

• yarn

  yarn add @uppy/angular
  

注意

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

使用

无需通过 .use() 向 Uppy 实例添加 UI 插件，Uppy 实例可以作为 props 属性传递给组件。

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

• <uppy-dashboard /> 渲染 @uppy/dashboard
• <uppy-drag-drop /> 渲染 @uppy/drag-drop
• <uppy-progress-bar /> 渲染 @uppy/progress-bar
• <uppy-status-bar /> 渲染 @uppy/status-bar

每个组件接受一个 props 属性，该属性将被传递给 UI 插件。

import { NgModule } from "@angular/core";
import { UppyAngularDashboardModule } from "@uppy/angular";

import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, UppyAngularDashboardModule],
  providers: [],
  bootstrap: [AppComponent],
})
class {}

<uppy-dashboard [uppy]="uppy"> </uppy-dashboard>

你应该在组件的属性中初始化 Uppy。

import { Component } from "@angular/core";
import { Uppy } from "@uppy/core";

@Component({
  selector: "app-root",
})
export class AppComponent {
  uppy: Uppy = new Uppy({ debug: true, autoProceed: true });
}

CSS

所有组件都有自己的样式，并应添加到你的组件装饰器中。你可以在你想要使用的 UI 插件的文档中找到 CSS 导入语句。例如，对于 @uppy/dashboard：

@Component({
  // ...
  styleUrls: [
    '../node_modules/@uppy/core/dist/style.css',
    '../node_modules/@uppy/dashboard/dist/style.css',
  ],
})