angular文件上传，支持多文件、拖拽、重试以及上传进度

1. Dependencies

@angular/cdk
@angular/material

2. file-upload组件

file-upload.component.html

<div class="upload-container"
     #uploadzone
     dropzone
     [class.hovering]="uploadzone.isHovering"
     (hovered)="uploadzone.isHovering = $event"
     (dropped)="onDrop($event)"
     (click)="onClick()">
  <p class="icon"><mat-icon>cloud_upload</mat-icon></p>
  <p class="title">Click or drag file to this area to upload</p>
  <p class="desc">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
</div>

<ul>
    <li *ngFor="let file of files" [@fadeInOut]="file.state">
      <mat-progress-bar [value]="file.progress"></mat-progress-bar>
      <span class="file-label">
      {{file.data.name}} 
      <a title="Retry" (click)="retryFile(file)" *ngIf="file.canRetry">
      <mat-icon>refresh</mat-icon></a>
      <a title="Cancel" (click)="cancelFile(file)" *ngIf="file.canCancel">
      <mat-icon>cancel</mat-icon></a>
      </span>
  </li>
</ul>

<input
  type="file"
  id="fileUpload"
  name="fileUpload"
  multiple="multiple"
  accept="{{accept}}"
  style="display:none;"/>

file-upload.component.scss

@import '~@angular/material/theming';

.upload-container {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  text-align: center;
  background: #fafafa;
  border: 1px dashed #d9d9d9;
  padding: 16px 0;
  margin: 20px;
  cursor: pointer;
  p {
    margin: 0;
    padding: 0;
  }
  .icon {
    margin-bottom: 20px;
  }
  .title {
    margin: 0 0 4px;
    color: rgba(0,0,0,.85);
    font-size: 16px;
  }
  .desc {
    color: rgba(0,0,0,.45);
    font-size: 14px;
  }
}

.hovering {
  border: 1px dashed tomato;
}

ul,
li {
    margin: 0 20px;
    padding: 0;
    list-style: none;
    mat-progress-bar {
        border-radius: 10px;
    }
    .file-label {
        display: inline-flex;
        vertical-align: middle;
        font-size: 12px;
        line-height: 18px;
        justify-content: flex-end;
        width: 100%;
        padding-top: 5px;
        mat-icon {
            font-size: 18px;
            text-align: center;
        }
        mat-icon:hover {
            color: map-get($mat-red, 500);
        }
        a {
            margin-left: 4px;
            cursor: pointer;
        }
    }
}

file-upload.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
import {
  trigger,
  state,
  style,
  animate,
  transition
} from "@angular/animations";
import {
  HttpClient,
  HttpResponse,
  HttpRequest,
  HttpEventType,
  HttpErrorResponse
} from "@angular/common/http";
import { of } from "rxjs";
import { catchError, last, map, tap } from "rxjs/operators";
import { FileUploadModel } from './file-upload.model';

@Component({
  selector: "app-file-upload",
  templateUrl: "./file-upload.component.html",
  styleUrls: ["./file-upload.component.scss"],
  animations: [
    trigger("fadeInOut", [
      state("in", style({ opacity: 100 })),
      transition("* => void", [animate(300, style({ opacity: 0 }))])
    ])
  ]
})
export class FileUploadComponent implements OnInit {
  /** Link text */
  @Input() text = "Upload";
  /** Name used in form which will be sent in HTTP request. */
  @Input() param = "file";
  /** Target URL for file uploading. */
  @Input() target = "https://file.io";
  /** File extension that accepted, same as 'accept' of <input type="file" />. By the default, it's set to 'image/*'. */
  @Input() accept = "image/*";
  /** Allow you to add handler after its completion. Bubble up response text from remote. */
  @Output() complete = new EventEmitter<string>();

  private files: Array<FileUploadModel> = [];

  constructor(private _http: HttpClient) {}

  ngOnInit() {}

  onDrop(files: FileList) {
    for (let index = 0; index < files.length; index++) {
      const file = files[index];
      this.files.push({
        data: file,
        state: "in",
        inProgress: false,
        progress: 0,
        canRetry: false,
        canCancel: true
      });
      this.uploadFiles();
    }
  }

  onClick() {
    const fileUpload = document.getElementById(
      "fileUpload"
    ) as HTMLInputElement;
    fileUpload.onchange = () => {
      for (let index = 0; index < fileUpload.files.length; index++) {
        const file = fileUpload.files[index];
        this.files.push({
          data: file,
          state: "in",
          inProgress: false,
          progress: 0,
          canRetry: false,
          canCancel: true
        });
      }
      this.uploadFiles();
    };
    fileUpload.click();
  }

  cancelFile(file: FileUploadModel) {
    file.sub.unsubscribe();
    this.removeFileFromArray(file);
  }

  retryFile(file: FileUploadModel) {
    this.uploadFile(file);
    file.canRetry = false;
  }

  private uploadFile(file: FileUploadModel) {
    const fd = new FormData();
    fd.append(this.param, file.data);

    const req = new HttpRequest("POST", this.target, fd, {
      reportProgress: true
    });

    file.inProgress = true;
    file.sub = this._http
      .request(req)
      .pipe(
        map(event => {
          switch (event.type) {
            case HttpEventType.UploadProgress:
              file.progress = Math.round((event.loaded * 100) / event.total);
              break;
            case HttpEventType.Response:
              return event;
          }
        }),
        tap(message => {}),
        last(),
        catchError((error: HttpErrorResponse) => {
          file.inProgress = false;
          file.canRetry = true;
          return of(`${file.data.name} upload failed.`);
        })
      )
      .subscribe((event: any) => {
        if (typeof event === "object") {
          this.removeFileFromArray(file);
          this.complete.emit(event.body);
        }
      });
  }

  private uploadFiles() {
    const fileUpload = document.getElementById(
      "fileUpload"
    ) as HTMLInputElement;
    fileUpload.value = "";

    this.files.forEach(file => {
      this.uploadFile(file);
    });
  }

  private removeFileFromArray(file: FileUploadModel) {
    const index = this.files.indexOf(file);
    if (index > -1) {
      this.files.splice(index, 1);
    }
  }

}

file-upload.model.ts

import { Subscription } from "rxjs";

export class FileUploadModel {
  data: File;
  state: string;
  inProgress: boolean;
  progress: number;
  canRetry: boolean;
  canCancel: boolean;
  sub?: Subscription;
}

3. drop指令

dropzone.directive.ts

import { Directive, HostListener, Output, EventEmitter } from "@angular/core";

@Directive({
  selector: "[dropzone]"
})
export class DropzoneDirective {
  @Output() dropped = new EventEmitter<FileList>();
  @Output() hovered = new EventEmitter<boolean>();

  @HostListener("drop", ["$event"])
  onDrop($event) {
    $event.preventDefault();
    this.dropped.emit($event.dataTransfer.files);
    this.hovered.emit(false);
  }

  @HostListener("dragover", ["$event"])
  onDragOver($event) {
    $event.preventDefault();
    this.hovered.emit(true);
  }

  @HostListener("dragleave", ["$event"])
  onDragLeave($event) {
    $event.preventDefault();
    this.hovered.emit(false);
  }
}

4. Demo Stackblitz 地址

angular-drag-file-upload

1	<div class="upload-container"
2	#uploadzone
3	dropzone
4	[class.hovering]="uploadzone.isHovering"
5	(hovered)="uploadzone.isHovering = $event"
6	(dropped)="onDrop($event)"
7	(click)="onClick()">
8	<p class="icon"><mat-icon>cloud_upload</mat-icon></p>
9	<p class="title">Click or drag file to this area to upload</p>
10	<p class="desc">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
11	</div>
12
13	<ul>
14	<li *ngFor="let file of files" [@fadeInOut]="file.state">
15	<mat-progress-bar [value]="file.progress"></mat-progress-bar>
16	<span class="file-label">
17	{{file.data.name}}
18	<a title="Retry" (click)="retryFile(file)" *ngIf="file.canRetry">
19	<mat-icon>refresh</mat-icon></a>
20	<a title="Cancel" (click)="cancelFile(file)" *ngIf="file.canCancel">
21	<mat-icon>cancel</mat-icon></a>
22	</span>
23	</li>
24	</ul>
25
26	<input
27	type="file"
28	id="fileUpload"
29	name="fileUpload"
30	multiple="multiple"
31	accept="{{accept}}"
32	style="display:none;"/>

1	@import '~@angular/material/theming';
2
3	.upload-container {
4	display: flex;
5	flex-direction: column;
6	align-content: center;
7	justify-content: center;
8	text-align: center;
9	background: #fafafa;
10	border: 1px dashed #d9d9d9;
11	padding: 16px 0;
12	margin: 20px;
13	cursor: pointer;
14	p {
15	margin: 0;
16	padding: 0;
17	}
18	.icon {
19	margin-bottom: 20px;
20	}
21	.title {
22	margin: 0 0 4px;
23	color: rgba(0,0,0,.85);
24	font-size: 16px;
25	}
26	.desc {
27	color: rgba(0,0,0,.45);
28	font-size: 14px;
29	}
30	}
31
32	.hovering {
33	border: 1px dashed tomato;
34	}
35
36	ul,
37	li {
38	margin: 0 20px;
39	padding: 0;
40	list-style: none;
41	mat-progress-bar {
42	border-radius: 10px;
43	}
44	.file-label {
45	display: inline-flex;
46	vertical-align: middle;
47	font-size: 12px;
48	line-height: 18px;
49	justify-content: flex-end;
50	width: 100%;
51	padding-top: 5px;
52	mat-icon {
53	font-size: 18px;
54	text-align: center;
55	}
56	mat-icon:hover {
57	color: map-get($mat-red, 500);
58	}
59	a {
60	margin-left: 4px;
61	cursor: pointer;
62	}
63	}
64	}

1	import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
2	import {
3	trigger,
4	state,
5	style,
6	animate,
7	transition
8	} from "@angular/animations";
9	import {
10	HttpClient,
11	HttpResponse,
12	HttpRequest,
13	HttpEventType,
14	HttpErrorResponse
15	} from "@angular/common/http";
16	import { of } from "rxjs";
17	import { catchError, last, map, tap } from "rxjs/operators";
18	import { FileUploadModel } from './file-upload.model';
19
20	@Component({
21	selector: "app-file-upload",
22	templateUrl: "./file-upload.component.html",
23	styleUrls: ["./file-upload.component.scss"],
24	animations: [
25	trigger("fadeInOut", [
26	state("in", style({ opacity: 100 })),
27	transition("* => void", [animate(300, style({ opacity: 0 }))])
28	])
29	]
30	})
31	export class FileUploadComponent implements OnInit {
32	/** Link text */
33	@Input() text = "Upload";
34	/** Name used in form which will be sent in HTTP request. */
35	@Input() param = "file";
36	/** Target URL for file uploading. */
37	@Input() target = "https://file.io";
38	/** File extension that accepted, same as 'accept' of <input type="file" />. By the default, it's set to 'image/'. /
39	@Input() accept = "image/*";
40	/** Allow you to add handler after its completion. Bubble up response text from remote. */
41	@Output() complete = new EventEmitter<string>();
42
43	private files: Array<FileUploadModel> = [];
44
45	constructor(private _http: HttpClient) {}
46
47	ngOnInit() {}
48
49	onDrop(files: FileList) {
50	for (let index = 0; index < files.length; index++) {
51	const file = files[index];
52	this.files.push({
53	data: file,
54	state: "in",
55	inProgress: false,
56	progress: 0,
57	canRetry: false,
58	canCancel: true
59	});
60	this.uploadFiles();
61	}
62	}
63
64	onClick() {
65	const fileUpload = document.getElementById(
66	"fileUpload"
67	) as HTMLInputElement;
68	fileUpload.onchange = () => {
69	for (let index = 0; index < fileUpload.files.length; index++) {
70	const file = fileUpload.files[index];
71	this.files.push({
72	data: file,
73	state: "in",
74	inProgress: false,
75	progress: 0,
76	canRetry: false,
77	canCancel: true
78	});
79	}
80	this.uploadFiles();
81	};
82	fileUpload.click();
83	}
84
85	cancelFile(file: FileUploadModel) {
86	file.sub.unsubscribe();
87	this.removeFileFromArray(file);
88	}
89
90	retryFile(file: FileUploadModel) {
91	this.uploadFile(file);
92	file.canRetry = false;
93	}
94
95	private uploadFile(file: FileUploadModel) {
96	const fd = new FormData();
97	fd.append(this.param, file.data);
98
99	const req = new HttpRequest("POST", this.target, fd, {
100	reportProgress: true
101	});
102
103	file.inProgress = true;
104	file.sub = this._http
105	.request(req)
106	.pipe(
107	map(event => {
108	switch (event.type) {
109	case HttpEventType.UploadProgress:
110	file.progress = Math.round((event.loaded * 100) / event.total);
111	break;
112	case HttpEventType.Response:
113	return event;
114	}
115	}),
116	tap(message => {}),
117	last(),
118	catchError((error: HttpErrorResponse) => {
119	file.inProgress = false;
120	file.canRetry = true;
121	return of(`${file.data.name} upload failed.`);
122	})
123	)
124	.subscribe((event: any) => {
125	if (typeof event === "object") {
126	this.removeFileFromArray(file);
127	this.complete.emit(event.body);
128	}
129	});
130	}
131
132	private uploadFiles() {
133	const fileUpload = document.getElementById(
134	"fileUpload"
135	) as HTMLInputElement;
136	fileUpload.value = "";
137
138	this.files.forEach(file => {
139	this.uploadFile(file);
140	});
141	}
142
143	private removeFileFromArray(file: FileUploadModel) {
144	const index = this.files.indexOf(file);
145	if (index > -1) {
146	this.files.splice(index, 1);
147	}
148	}
149
150	}

1	import { Subscription } from "rxjs";
2
3	export class FileUploadModel {
4	data: File;
5	state: string;
6	inProgress: boolean;
7	progress: number;
8	canRetry: boolean;
9	canCancel: boolean;
10	sub?: Subscription;
11	}

1	import { Directive, HostListener, Output, EventEmitter } from "@angular/core";
2
3	@Directive({
4	selector: "[dropzone]"
5	})
6	export class DropzoneDirective {
7	@Output() dropped = new EventEmitter<FileList>();
8	@Output() hovered = new EventEmitter<boolean>();
9
10	@HostListener("drop", ["$event"])
11	onDrop($event) {
12	$event.preventDefault();
13	this.dropped.emit($event.dataTransfer.files);
14	this.hovered.emit(false);
15	}
16
17	@HostListener("dragover", ["$event"])
18	onDragOver($event) {
19	$event.preventDefault();
20	this.hovered.emit(true);
21	}
22
23	@HostListener("dragleave", ["$event"])
24	onDragLeave($event) {
25	$event.preventDefault();
26	this.hovered.emit(false);
27	}
28	}