拿到粘贴板上的 image file 对象

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

从 paste 事件的 ClipboardEvent 对象上可以拿到。这里得到的 file 和 <input type="file" /> 上传选择文件得到的 file 对象一样。

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

上传图片

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

functionuploadFile(file) {returnnewPromise(resolve=>{setTimeout(() =>resolve(URL.createObjectURL(file)),1000)  })}consturl =awaituploadFile(file)

插回输入框

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

constinsert =``// img markdown 语法const{ target } = econstbefore = target.value.substr(0, target.selectionStart)constafter = target.value.substr(target.selectionEnd)target.value= before + insert + afterconstcursorPosition = (before + insert).lengthtarget.setSelectionRange(cursorPosition, cursorPosition)// 设置光标位置

完整代码如下：

document.querySelector('textarea').addEventListener('paste',asynce => {// 拿到粘贴板上的 image file 对象constfile =Array.from(e.clipboardData.items)    .find(v=>v.type.includes('image'))    ?.getAsFile()// 上传到图床服务器拿到 image web urlconsturl =awaituploadFile(file)// 将 url 插入到输入框光标处constinsert =``// img markdown 语法const{ target } = econstbefore = target.value.substr(0, target.selectionStart)constafter = target.value.substr(target.selectionEnd)  target.value= before + insert + afterconstcursorPosition = (before + insert).lengthtarget.setSelectionRange(cursorPosition, cursorPosition)})functionuploadFile(file) {returnnewPromise(resolve=>{setTimeout(() =>resolve(URL.createObjectURL(file)),1000)  })}

散热风扇https://www.uv-semi.com/

深圳网站建设www.sz886.com