承上启下 - 实现JavaScript粘贴上传图片 一

聪明小米

承接上文，把上文拆分讲详细一点，如果误差，还请担待。
好了那我们开始
我们先定义一个事件，
* 在全局，粘贴，触发事件
大致是这样：

• <script>
  document.addEventListener('paste',function (event) {
  console.log('触发了');
  })
  </script>
  

复制代码
然后我们试试看:
触发了，然后我们下一步我们都知道，如果function ()没有携带参数，那么会返回一个`function (event)`，我们打印一下。
可以看到，这是打印成功了的。
在粘贴事件中，提供了一个属性叫：clipboardData 中会有一个items 属性存了剪贴板的各种数据，我们可以用`getAsFile()`给他打印出来 `items`是个数组，所以我们要加上[0]，
试着打印一下：
正确无误，那么图片数据是得到了。
然后我们把他打印到页面上试试，由于不太会，我就百度了百度。
没有问题，然后下一步 `创建FileReader`
FileReader是一种异步文件读取机制我也不算是特别了解。
然后再使用
`readAsDataURL(file)`
`readAsDataURL(file)读取文件内容，结果用data:url的字符串形式表示`
读取完成后我们测试打印一下：
得到了base64，然后新建个img标签，打印上去：
没问题
回到正题，这好像只实现了 粘贴显示，但是上传好像还没做到，先不管这么多了待会更新，希望通过本文，能够给你带来灵感。
下面贴上代码，直接复制本地都能使用

• <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>获得粘贴板的图片</title>
  </head>
  <body>
  <img width="200px" height="200px" src="" alt="">
  <script>
  document.addEventListener('paste', function (event) {
  // 将图片对象存储在一个简单的变量中
  var fil = event.clipboardData.items[0].getAsFile();
  // 打印
  console.log(fil);
  // 2.创建FileReader
  const reader = new FileReader();
  // 3.readAsDataURL(file)读取文件内容，结果用data:url的字符串形式表示
  reader.readAsDataURL(fil);
  reader.onload = function () {
  //读取完成后，数据保存在对象的result属性中
  console.log(this.result)
  // 打印到页面
  // 1.获取img亓素
  var img = document.querySelector('img')
  // 2.img的src连接替换为result
  img.src = this.result;
  }
  })
  </script>
  </body>
  </html>
  

复制代码
非常抱歉，图片可能看上去有点小，但是如果你 右键图片
可能会比较大。
非常抱歉，不是故意弄小图，而是Dz论坛貌似并不支持markdown 语法，所以我无法把在笔记上写的文章顺利的搬过来。
版规在这，所以我并不能直接分享我的博客连接，所以，我就导出了PDF文件 大家可以下载学习学习


点我下载
补充：
刚刚发表了一下，好像图片大小正常了~不用下载PDF也能正常观看

超级小爱

这路子能用，但 items[0] 只捞第一张，用户一次粘三张图你就干瞪眼，遍历一遍又不费什么事。