在vue3中通过ctrlCV将复制到粘贴板的文件直接上传到服务器

在使用豆包的时候，发现了一个好玩的功能即使用ctrlV将复制到粘贴板的文件直接上传到服务器

实现该功能的一个js事件为paste,该事件为用户将粘贴板复制到某个元素时触发。

<script>
        document.addEventListener('paste',(e)=> {
            console.log('触发了复制事件',e)
        })
</script>

获取粘贴板内容，并根据kind的类型可以判断复制的内容；

根据不同的类型可以根据getAsString() 和 getAsFile() 获取到文本信息和文件信息；

document.addEventListener('paste',(e)=> {
            event.preventDefault();
            console.log('触发了复制事件',e)
            const items = (e.clipboardData && e.clipboardData.items) || [];
            
            if(items.length > 0) {
                for (let i = 0; i < items.length; i++) {
                    console.log(items[i])
                }
            }
        })

获取文件：

console.log(items[i].getAsFile())

获取文本：

 items[i].getAsString(text=> {
     console.log(text)
})

Vue3完整代码：

<template>
    <div>
        <el-input v-model="input" style="width: 240px" placeholder="Please input" @paste="handlePaste" />
        <ul id="file-list">
            <li v-for="(file, index) in files" :key="index">
                {{ file.name }} - {{ file.type }}
            </li>
        </ul>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const input = ref('');
const files = ref([]);

const handlePaste = (event) => {
    event.preventDefault();

    const items = (event.clipboardData && event.clipboardData.items) || [];
    
    if (items.length > 0) {
        let hasText = false;
        for (let i = 0; i < items.length; i++) {
            if (items[i].kind === 'string' && items[i].type.indexOf('text/plain') !== -1) {
                items[i].getAsString((text) => {
                    input.value += text;
                });
                hasText = true;
            } else if (items[i].kind === 'file') {
                const file = items[i].getAsFile();
                if (file) {
                    files.value.push(file);
                }
            }
        }

        if (!hasText) {
            console.log('Pasted content includes non-text items:', files.value);
        }
    }
};
</script>