经常在群里面看到小伙伴们求各种好用插件,组件之类的,这边我来分享一个功能简单,非常实用的文件上传组件。
对于组件来说,最好就做好它本分的任务就可以了,就不要做一些其它的任务
案例
对,就是这么简单,而且这个样式并没有在组件里面,这里是为了更好的演示,写了个简单的容器。
@Component({
selector: '[fileUpload]',
template:`
<ng-content></ng-content>
<div style="display: none">
<input type="file" #file (change)="change(file)" [multiple]="multiple">
</div>
`,
styles:[
`
:host {
cursor: pointer;
}
`
]
})
export class FileUploadComponent implements OnInit {
constructor(){
}
ngOnInit(){
}
@Input('multiple') multiple: boolean = false;
@Input('disabled') disabled: boolean = false;
@Input('drop') isDrop;
@Output('eventChange') eventChange = new EventEmitter<any>();
@ViewChild('file') fileRef: ElementRef;
@Output('eventDragleave') eventDragleave = new EventEmitter<any>();
@Output('eventDragenter') eventDragenter = new EventEmitter<any>();
@Output('eventDragover') eventDragover = new EventEmitter<any>();
change(file){
this.eventChange.next(file.files)
this.fileRef.nativeElement.value = null;
}
@HostListener('click')
eventClick() {
if (this.disabled) return;
this.fileRef.nativeElement.click();
}
@HostListener('dragleave', ['$event'])
dragleave(e) {
e.preventDefault();
e.stopPropagation();
if (!this.isDrop) return;
this.eventDragleave.next(e)
}
@HostListener('dragenter', ['$event'])
dragenter(e) {
e.preventDefault();
e.stopPropagation();
if (!this.isDrop) return;
this.eventDragenter.next(e)
}
@HostListener('dragover', ['$event'])
dragover(e) {
e.preventDefault();
e.stopPropagation();
if (!this.isDrop) return;
this.eventDragover.next(e)
}
@HostListener('drop', ['$event'])
drop(e) {
e.preventDefault();
e.stopPropagation();
if (!this.isDrop) return;
if (this.disabled) return;
this.eventChange.next(e.dataTransfer.files);
}
}
代码没有很复杂,就完成了一个单一任务,上传的方式有点击和拖拽两种。
这个组件还可以完善一些其他的需求,比如文件类型验、大小验证,图片视频还可以验证宽高、时长等。
如果有需求可以仿照百度上传控件的API(webuploader)再开发,一步步完善上传控件。
demo
html:
<div fileUpload (eventChange)="change($event)" [drop]="true"></div>
typescript:
change(files){
console.info(files[0])
}
后记
后续有时间会写一个基于这个版本开发一个比较复杂的上传控件,这边也希望小伙伴们尽可能的将组件颗粒化,简单化,慢慢的完善迭代自己的组件,慢慢的积累和学习他人的写法,这也是学习的过程。