粘贴图片

共计 515 字，约需阅读 1.87 分钟

背景

优化用户编辑体验，实现在编辑内容（markdown 或富文本）时通过复制的方式实现图片的插入

实现

  1. 监听剪贴板事件中的 paste 事件
  2. 通过事件的回调对象获取粘贴内容，若为文本则执行默认操作，若为图片类型则阻止默认操作并继续处理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const cb = (event) => {
  const data = event.clipboardData // 获取粘贴内容
  let fileContent
  let stopFlag = false
  // 遍历对象获取粘贴文件
  for (let i = 0; data && data.items && i < data.items.length; i++) {
    const item = data.items[i]
    if (item.kind === 'file' && item.type.match('^image/')) {
      stopFlag = true
      fileContent = item.getAsFile()
    }
  }
  // 对 fileContent 做处理
}

说明

  • event 是 ClipboardEvent 类型，可以通过 clipboardData 属性拿到数据内容
  • clipboardData 是 [ DataTransfer](https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer)对象，在粘贴事件中可以通过 items 属性获取粘贴的内容和数据类型，其是一个 [DataTransferItemList](https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransferItemList) 对象，通过 for 循环的方式遍历每一个元素，每个元素都是 [DataTransferItem`](https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransferItem)对象

DataTransferItem 对象

属性
  • kind： 拖拽项的种类，string 或是 file
  • type：拖拽项的类型，一般是一个 MIME 类型
方法
  • getAsFile()：返回一个关联拖拽项的 File 对象 （当拖拽项不是一个文件时返回 null）
  • getAsString()：使用拖拽项的字符串作为参数执行指定回调函数。
  • webkitGetAsEntry()：返回一个基于 FileSystemEntry 的对象来表示文件系统中选中的项目。通常是返回一个 FileSystemFileEntry 或是 FileSystemDirectoryEntry 对象.

注意

  1. 在 mac 上复制一张图片文件时会产生两个记录，第一个记录是文件名，第二个对象是文件本身
  2. 在 mac 上复制一个非图片类型的文件时，也会产生两个记录，一个是文件名，另一个是文件的缩略图，但是这个文章的缩略图通过 getAsFile 方法无法获取到内容

参考