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

系列文章目录

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

---

---

背景和功能

1.背景

提示：主要是介绍背景

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

2.功能

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

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

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

---

提示：下面案例可供参考

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

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

// 监听粘贴事件 paste （全局注册）
document.addEventListener('paste', (event