有很多 Web 编辑器支持直接复制粘贴图片，记录一下这种效果是怎么实现的

拿到粘贴板上的 image file 对象

document.querySelector('textarea').addEventListener('paste', e => {
  const file = Array.from(e.clipboardData.items)
    .find(v => v.type.includes('image'))
    ?.getAsFile()
})

从 paste 事件的 ClipboardEvent 对象上可以拿到。这里得到的 file 和 上传选择文件得到的 file 对象一样。

拿到 file 之后就可以做其他操作如上传到服务器，得到 url服务器托管网 链接等

上传图片

通常需要将拿到的图片文件上传到图床或自己的图片服务器上。

function uploadFile(file) {
  return new Promise(resolve => {
    setTimeout(() => resolve(URL.createObjectURL(file)), 1000)
  })
}
const url = await uploadFile(file)

插回输入框

将上传得到的 image url 插入到输入框光标位置

const insert = `![](${url})` // img markdown 语法
const { target } = e
const before = target.value.substr(0, target.selectionStart)
const after = target.value.substr(target.selectionEnd)
target.value = before + insert + after
const cursorPosition = (before + insert).length
target.setSelectionRange(cursorPosition, cursorPosition) // 设置光标位置

完整代码如下：

document.querySelector('textarea').addEventListener('paste', async e => {
  // 拿到粘贴板上的 image file 对象
  const file = Array.from(e.clipboardData.items)
    .find(v => v.type.includes('image'))
    ?.getAsFile()
  // 上传到图床服务器拿到 image web url
  const url = await uploadFile(file)

  // 将 url 插入到输入框光标处
  const insert = `![](${url})` // img markdown 语法
  const { target } = e
  const before = target.value.substr(0, target.selectionStart)
  const after = target.value.substr(target.select服务器托管网ionEnd)
  target.value = before + insert + after
  const cursorPosition = (before + insert).length
  target.setSelectionRange(cursorPosition, cursorPosition)
})
function uploadFile(file) {
  return new Promise(resolve => {
    setTimeout(() => resolve(URL.createObjectURL(file)), 1000)
  })
}

你可以在这里查看运行示例：
https://code.juejin.cn/pen/7309685835798937610

觉得不错，点点小赞：）

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: KW 喜报 | KaiwuDB 斩获 2023 数博会“优秀科技成果”奖

5月26日，大数据领域的国家级盛会——2023 中国国际大数据产业博览会（以下简称“2023 数博会”）在贵阳盛大开幕。作为大会最重磅的环节之一，“2023 领先科技成果发布会”于数博发布中心场地举办，向全行业发布 70 余项兼具科学性、创新性、前瞻性、引导性…