在输入框里直接粘贴图片的实现方式

有很多 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 和 <input type="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.selectionEnd)
  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

觉得不错,点点小赞:)

 

【出处】:https://www.cnblogs.com/iovec/p/17881991.html

posted on   jack_Meng  阅读(568)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
历史上的今天:
2022-12-13 优雅的API接口设计
2022-12-13 对于async和await的使用同步、异步、顺序执行方式
2021-12-13 Win10原版 U盘安装盘制作和安装教程
2019-12-13 自定义基于 VLC 的视频播放器
2019-12-13 基于VLC库C#开发可播放摄像头及任意格式视频的播放器
2019-12-13 用vlc搭建简单流媒体服务器(UDP和TCP方式)
2019-12-13 javascript加载XML字符串或文件

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示

喜欢请打赏

扫描二维码打赏

支付宝打赏

主题色彩