实现复制粘贴上传图片
注意:微信、钉钉、电脑自带截图,在截图后直接粘贴都可以上传。要是先粘贴在微信或钉钉的消息框,再选中复制粘贴的话,微信正常,钉钉会拿不到文件。
<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);

浙公网安备 33010602011771号