如何在Chrome粘贴图片直接上传

背景

截图或页面复制图片，可以直接通过Ctrl+v 粘贴上传图片

原理

操作：复制（截图）=>粘贴=>上传

监听粘贴事件=>获取剪贴板里的内容=>发请求上传

浏览器：Chrome、IE11

Chrome浏览器

1、通过监听粘贴事件，event有clipboardData属性，且clipboardData有item属性

2、获取剪切板的base64编码字符串，传到后台服务器

3、服务器获取到base64编码字符串转化为图片保存服务器

4、前台获取图片名并展示

IE11

1、IE11是没有event有clipboardData属性的，所以不能直接获取base64编码字符串

2、页面放置一个带有contenteditable属性的div容器，用于接收IE粘贴的图片，PS：IE粘贴事件需要在设置了contenteditable属性的div粘贴才会触发

3、当进行粘贴操作，让焦点在div容器中，这时粘贴事件才会触发，DIV中直接生成IMG

4、从IMG中src获取base64编码字符串，传到后台服务器

5、服务器获取到base64编码字符串转化为图片保存服务器

6、前台获取图片名并展示

注意点：Chrome和IE11 触发paste事件的区别

1、Chrome无论在哪进行粘贴，均可触发paste事件
2、IE11只能在div中触发paste事件