Angular组件-文件上传组件

常常在群里面看到小伙伴们求各类好用插件，组件之类的，这边我来分享一个功能简单，很是实用的文件上传组件。

对于组件来讲，最好就作好它本分的任务就能够了，就不要作一些其它的任务

案例

对，就是这么简单，并且这个样式并无在组件里面，这里是为了更好的演示，写了个简单的容器。

@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])
}复制代码

后记

后续有时间会写一个基于这个版本开发一个比较复杂的上传控件，这边也但愿小伙伴们尽量的将组件颗粒化，简单化，慢慢的完善迭代本身的组件，慢慢的积累和学习他人的写法，这也是学习的过程。