拿到粘贴板上的 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
