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])
}複製代碼

後記

後續有時間會寫一個基於這個版本開發一個比較複雜的上傳控件，這邊也但願小夥伴們儘量的將組件顆粒化，簡單化，慢慢的完善迭代本身的組件，慢慢的積累和學習他人的寫法，這也是學習的過程。