实现复制粘贴上传图片

注意:微信、钉钉、电脑自带截图,在截图后直接粘贴都可以上传。要是先粘贴在微信或钉钉的消息框,再选中复制粘贴的话,微信正常,钉钉会拿不到文件。

<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);

  

posted @ 2022-08-05 14:17  Jade_g  阅读(438)  评论(0编辑  收藏  举报