在输入框里直接粘贴图片

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

拿到粘贴板上的 image file 对象

js 复制代码
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 链接等

上传图片

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

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

插回输入框

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

js 复制代码
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) // 设置光标位置

完整代码如下:

js 复制代码
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)
  })
}

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

觉得不错,点点小赞:)

相关推荐
Cachel wood22 分钟前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端23 分钟前
0基础学前端-----CSS DAY9
前端·css
joan_8528 分钟前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
还是大剑师兰特1 小时前
什么是尾调用,使用尾调用有什么好处?
javascript·大剑师·尾调用
m0_748236111 小时前
Calcite Web 项目常见问题解决方案
开发语言·前端·rust
Watermelo6171 小时前
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
m0_748248941 小时前
HTML5系列(11)-- Web 无障碍开发指南
前端·html·html5
m0_748235611 小时前
从零开始学前端之HTML(三)
前端·html
一个处女座的程序猿O(∩_∩)O3 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js
hackeroink6 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss