輸入框黏貼或者拖拽上傳文件

<textarea #enterTextarea nz-input [placeholder]="placeholder" [(ngModel)]="content"
  (ngModelChange)="onContentChange($event)" [nzAutosize]="{ minRows:minRows, maxRows:maxRows }" (keydown)="handleKeyDown($event)" (paste)="pasteFn($event)"></textarea>

ts

// 限制文件類型
public accept: string = 'application/pdf,image/*,application/msword,text/plain,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.openxmlformats-officedocument.wordprocessingml.document';
// 鍵盤按下的操作
public handleKeyDown(event: KeyboardEvent): void {
        if (!this.content || !this.content.trim()) {
            return;
        }
        event.stopPropagation();
        if (event.ctrlKey && event.key === 'Enter') {
            // 提交數據的操作
            this.content = null;
        }
    }
// 添加刪除class顏色    
public toggleColor(bool: boolean): void {
        bool ? this.renderer.addClass(this.enterTextareaRef.nativeElement, 'textarea-class')
            : this.renderer.removeClass(this.enterTextareaRef.nativeElement, 'textarea-class');
    }
// 清除默認行爲和添加刪除class
public defaultEventFn(evt: any, bool: boolean): void {
        evt.preventDefault();
        evt.stopPropagation();
        this.toggleColor(bool);
    }

public emitFile(files: Array<File>): void {
        if (files.length > 0) {
            if (files.some(val => !decideAccept(this.accept, val))) {
                this.message.error('上傳文件格式不合法');
                return;
            }
           // 提交文件的操作
        }
    }
// ctrl+v 提交文件的事件   
public pasteFn(event: ClipboardEvent): void {
        const items: any = event.clipboardData && event.clipboardData.items;
        const files: Array<File> = [];
        if (items && items.length) {
            for (let i: number = 0; i < items.length; i++) {
                // 爲什麼加這個判斷, 因爲不用攔截文本的複製黏貼事件, 讓它走默認行爲
                if (items[i].type !== 'text/plain') {
                    const fileItem: any = items[i]?.getAsFile();
                    if (fromCore.isImage(items[i].type)) {
                        fileItem.thumbUrl = this.domSanitizer.bypassSecurityTrustUrl(URL.createObjectURL(fileItem)) as string;
                    }
                    // 避免會出現空的情況
                    if (fileItem != null) {
                        files.push(fileItem);
                    }
                    event.preventDefault();
                    event.stopPropagation();
                }
            }
        }
        this.emitFile(files);
    }
// 進入拖拽位置    
@HostListener('dragenter', [ '$event' ])
public dragenterFn(evt: DragEvent): void {
        this.defaultEventFn(evt, true);
        this.dragBool = true;
 }
// 離開到拖拽位置
@HostListener('dragleave', [ '$event' ])
public dragLeaveFn(evt: DragEvent): void {
        this.defaultEventFn(evt, false);
        this.dragBool = false;
}
// 進入拖拽的位置鬆開鼠標開始上傳
@HostListener('drop', [ '$event' ])
public dropFn(evt: DragEvent): void {
        if (!this.dragBool) {
            return;
        }
        this.defaultEventFn(evt, false);
        const files: Array<any> = Array.from(evt.dataTransfer?.files);
        for (let i: number = 0; i < files.length; i++) {
            if (fromCore.isImage(files[i].type)) {
                files[i].thumbUrl = this.domSanitizer.bypassSecurityTrustUrl(URL.createObjectURL(files[i])) as string;
            }
        }
        this.emitFile(files);
}