实现复制粘贴上传图片
注意:微信、钉钉、电脑自带截图,在截图后直接粘贴都可以上传。要是先粘贴在微信或钉钉的消息框,再选中复制粘贴的话,微信正常,钉钉会拿不到文件。
<input type="text" id="upload">
/** 文件转化成64位 */ const getBase64 = (file) => { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = error => reject(error); }); } let fileListObj = []; /** 粘贴快捷键的回调 */ const onPaste = async (e) => { console.log(e) /** 获取剪切板的数据clipboardData */ var clipboardData = e.clipboardData, i = 0, items, item, types; /** 为空判断 */ if (clipboardData) { items = clipboardData.items; if (!items) { return; } item = items[0]; types = clipboardData.types || []; /** 遍历剪切板的数据 */ for (; i < types.length; i++) { if (types[i] === 'Files') { item = items[i]; break; } } /** 判断文件是否为图片 */ if (item && item.kind === 'file' && item.type.match(/^image\//i)) { const imgItem = item.getAsFile(); const listItem = { ...imgItem, status: 'done', url: await getBase64(imgItem), originFileObj: imgItem } fileListObj.push(listItem); const img = document.createElement('img'); img.src = listItem.url; document.body.append(img); } } } const upload = document.getElementById('upload'); upload.addEventListener('paste', onPaste);