Angular组件-文件上传组件

3,578 阅读2分钟

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

对于组件来说,最好就做好它本分的任务就可以了,就不要做一些其它的任务

案例


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


@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])
}

后记

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