前端复制粘贴图片

前端实现复制图片粘贴在屏幕上显示
总体思路：
1、监听粘贴事件
2、展示图片

一、监听粘贴事件

• contenteditable：元素是否可编辑，为true或空字符串为可编辑
• @paste：这里监听window的paste（粘贴）事件，这种类型的事件被称为剪贴板事件（ClipboardEvent），除了paste事件之外还有cut（剪切）和copy（复制）

 <div class="paste-container" contenteditable="true" @paste="handlePaste"></div>

.paste-container {
  margin: 20px;
  min-height: 500px;
  border: 1px dashed #ccc;
}

二、展示图片

• 通过监听paste事件可以得到一个事件对象event，得到clipboardData
• getAsFile是DataTransferItem接口中定义的方法，用于将粘贴板上的数据转换成File对象
• 创建一个文件服务器并加载刚才粘贴的图片

    handlePaste(event) {
      const items = (event.clipboardData || event.originalEvent.clipboardData).items
      for (const item of items) {
        if (item.type.indexOf('image') === 0) {
          const blob = item.getAsFile()
          const reader = new FileReader()
          reader.onload = event => {
            const imageUrl = event.target
            // 执行你需要的操作，比如显示图片预览等
            console.log(imageUrl)
          }
          reader.readAsDataURL(blob)
        }
      }
    }