最近项目需求是获得QQ截图或者微信截图，直接粘贴文本框内并发送

开发中使用paste事件，一直显示clipboardData的items内容为空，一直以为获得不到里面的，后来才发现items是一个伪数组，直接使用下面的方法就可以了

输入框中要实现粘贴图片功能，不能用input、textarea等输入框作为父容器，因为input、textarea中只能接受字符串，对于html标签不进行转义以及渲染。

所以用contenteditable='true'属性来使div(其他容器也可)实现可编辑，来模拟输入框，实现粘贴图片至输入框中的效果
 

代码如下：

html部分：

<div
    ref="paste"
    type="text"
    contenteditable="true"
    @paste.stop.prevent="pasteImg($event)" 
    >
</div>

js代码

pasteImg(e) {
      console.log('获得剪切板的内容', e);
      const cbd = e.clipboardData;
	    const ua = window.navigator.userAgent;
	    // 如果是 Safari 直接 return
	    if ( !(e.clipboardData && e.clipboardData.items) ) {
	      return ;
	    }
	    if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
	        cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
	        ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
	        return;
	    }
	    for(let i = 0; i < cbd.items.length; i++) {
        let item = cbd.items[i];
        if(item.kind == "file"){
          // blob 就是从剪切板获得的文件，可以进行上传或其他操作
          const blob = item.getAsFile();
          console.log('获得blob', blob);
          if (blob.size === 0) {
              return;
          }
          const reader = new FileReader();
          const imgs = new Image(); 
          imgs.file = blob;
          reader.onload = (function(aImg) {
              return function(e) {
                console.log('获得粘贴的结果', e.target.result);
                aImg.src = e.target.result;
              };
            })(imgs);
          reader.readAsDataURL(blob);
          this.$refs.paste.appendChild(imgs);
        }
      }
    }

结果：