前端实现复制文件，Ctrl + V进行文件的上传（简单，易懂，快速，可自行拓展，线上已投入使用）

本文链接：https://blog.csdn.net/weixin_46022934/article/details/143248793

系列文章目录

提示：本次的功能是完成一个系统级别的复制粘贴操作。（给大家一个简单，易懂，可快速使用的方案。）

文章目录

系列文章目录
背景和功能
- 1.背景
- 2.功能
一、Vue3代码，（初版例子）
- 1. 代码如下（附：详细注释）
总结（看一看吧）

请添加图片描述

背景和功能

1.背景

提示：主要是介绍背景

当前业务中会频繁的接触：pdf，png 等文件资源
需要把这些文件通过第三方软件，例如：邮箱，微信（企业），飞书，这些软件都会对直接拖拽文件进行区域限制。
所以这个时候，通过复制文件到剪贴板，然后通过粘贴 Ctrl+V 实现文件流的上传就会显得非常的有必要！！

2.功能

提示：主要是介绍本次功能的流程和后续功能展望
1.主要还是我太懒了，还有就是现在是真的有一些忙。
2.每天睁👀就是上班，闭眼就是睡觉

首先需要解决 ==> 如何读取到剪贴板中的数据：
大概有3种方法（这个可能要废弃了execCommand，最好做一下兼容性处理） 其他的方法自行百度，一大堆
这些方法都适用于哪些场景；1. 读取文本，2. 浏览器安全性，3. 读到文件流
如何获取文件流
如恶化对文件流进行转化 （其实这里是可以进行功能拓展： 1.文件分片 2.文件流配置，3.续传（不建议））
推送到什么位置
成功以后拿到什么结果

大体上是上面的几个步骤，如果你可以都成功解决，并且可以完成功能拓展。
那么恭喜你，可以把这个功能放到你的个人简历上了，面试的时候，直接把这一套流程讲给面试官听就完事了

提示：下面案例可供参考

一、Vue3代码，（初版例子）

1. 代码如下（附：详细注释）

// 监听粘贴事件 paste （全局注册）
document.addEventListener('paste', (event) => {
	// 获取对应的文件信息
    const items = event.clipboardData.items;
    // 拿到剪贴板中的内容（这里没使用forEach是有原因的，可以自己尝试一下）
    for (let i = 0; i < items.length; i++) {
        if (items[i].kind === 'file') {
            set(items[i])
            const file = items[i].getAsFile();
            console.log('File:', file);
            // 这里可以添加处理文件的逻辑，例如上传文件等
        }
    }
});


// 把事件提取出来，removeEvent 可以生效
const pasteFileUpload = (event) => {
    const filesItems = event.clipboardData.items

    for (let i = 0; i < filesItems.length; i++) {

        if(filesItems[i].kind === "file") {
            const file = filesItems[i].getAsFile()

        }
        
    }
    
}

// 这里是 注销 paste 事件
const handleClosed = () => {
    document.removeEventListener("paste", pasteFileUpload)
 
}
// 这里使用 watch 可以动态的监听你想要触发的条件是什么，方便更好的注册和移除。
watch(() => form.bookingType, (val) => {

    if(val === "") {
        document.addEventListener("paste", pasteFileUpload)
        
        return
    }
    document.removeEventListener("paste", pasteFileUpload)
    
})