Angular元件-檔案上傳元件

釋迦摩尼發表於2019-03-04
Angular元件

經常在群裡面看到小夥伴們求各種好用外掛，元件之類的，這邊我來分享一個功能簡單，非常實用的檔案上傳元件。

對於元件來說，最好就做好它本分的任務就可以了，就不要做一些其它的任務

案例

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

後記

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

相關文章