前端js获取剪切板中的文本或者图片文件数据

功能描述

1. 获取剪切板中的文本或者图片

实现

// 1. 监听paste事件，在进行粘贴的时候会触发
DOM节点.addEventListener('paste', function (event) {
	// 输出事件对象的clipboardData属性，如下图，数据存储在对象中，但是直接打开是看不到的，只有输出event.clipboardData对象的某个属性或方法才可以看到
	console.log(event.clipboardData);
	// 获取文本值
	event.clipboardData.getData('text');
	// 获取图片
	// 读取到图片对象
	let file = event.clipboardData.files[0];
	// 判断类型
	if (!(/^image\/[jpeg|png|gif|jpg]/.test('image/jpg'))) {
        return;
    }
	// 读取成base64
	let reader = new FileReader();
	reader.readAsDataURL(file);
	// 监听读取完成
	reader.onload() = function() {
		let src = reader.result;
	}
    // 上传
    let formData = new FormData();
    formData.append('file', file);
})

说明

1. 示例代码支持谷歌，ie兼容的不支持