监听粘贴获取图片类型的文件

vue中 监听粘贴事件获取图片类型的文件

1.给文本框注册监听事件

<textarea
	@paste="onPaste" // 监听的事件
></textarea>

2.监听paste粘贴事件，针对图片进行操作

onPaste(event) {
    if (event.clipboardData || event.originalEvent) {
        //某些chrome版本使用的是event.originalEvent
        const clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
        if(clipboardData.items){
            const files = []
            Object.keys(clipboardData.items).forEach((item) => {
                const file = clipboardData.items[item]
                if (file.type.indexOf('image') > -1) {
                   files.push(file.getAsFile()) 
                }
            })
            console.log("获取文件信息",files);  // files中就有文件信息
        }
    }
}

clipboardData是一个DataTransferItemList的对象，进行遍历获得DataTransferItem，再通过DataTransferItem的实例方法getAsFile()获取文件信息