Angular的Dropzone文件上传组件

Angular的Dropzone文件上传组件
插件名称 dropzone
发布时间 2020年4月29日
插件作者 peterfreeman

高度可定制的Angular dropzone组件,用于捕获文件上传。

安装:

# NPM
$ npm install ngx-dropzone --save

使用:

// 在 app.module.ts
import { NgxDropzoneModule } from 'ngx-dropzone';

@NgModule({
  ...
  imports: [
    NgxDropzoneModule
  ],
  ...
})
export class AppModule { }
<!-- 在 app.component.html -->
<ngx-dropzone (change)="onSelect($event)">
<ngx-dropzone-label>Drop it, baby!</ngx-dropzone-label>
<ngx-dropzone-preview *ngFor="let f of files" [removable]="true" (removed)="onRemove(f)">
<ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
</ngx-dropzone-preview>
</ngx-dropzone>
// 在 app.component.ts
files: File[] = [];

onSelect(event) {
  console.log(event);
  this.files.push(...event.addedFiles);
}

onRemove(event) {
  console.log(event);
  this.files.splice(this.files.indexOf(event), 1);
}

您还可以使用特殊的预览组件来预览图像或视频:

<ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" *ngFor="let f of files" [file]="f">
<ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
</ngx-dropzone-image-preview>
<ngx-dropzone-video-preview ngProjectAs="ngx-dropzone-preview" *ngFor="let f of files" [file]="f">
<ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
</ngx-dropzone-video-preview>