在輸入框裡直接貼上圖片

dombro發表於2023-12-07

有很多 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

覺得不錯，點點小贊：）

相關文章