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

CQXX · 发表于 2022-6-19 20:48:57

承接上文，把上文拆分讲详细一点，如果误差，还请担待。
好了那我们开始
我们先定义一个事件，
*在全局，粘贴，触发事件
大致是这样：
<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标签，打印上去：
没问题
回到正题，这好像只实现了粘贴显示，但是上传好像还没做到，先不管这么多了待会更新，希望通过本文，能够给你带来灵感。
下面贴上代码，直接复制本地都能使用
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>获得粘贴板的图片</title>
</head>
<body>
<imgwidth="200px"height="200px"src=""alt="">
<script>
document.addEventListener('paste',function(event){
//将图片对象存储在一个简单的变量中
varfil=event.clipboardData.items[0].getAsFile();
//打印
console.log(fil);
//2.创建FileReader
constreader=newFileReader();
//3.readAsDataURL(file)读取文件内容，结果用data:url的字符串形式表示
reader.readAsDataURL(fil);
reader.onload=function(){
//读取完成后，数据保存在对象的result属性中
console.log(this.result)
//打印到页面
//1.获取img元素
varimg=document.querySelector('img')
//2.img的src连接替换为result
img.src=this.result;
}
})
</script>
</body>
</html>
复制代码
非常抱歉，图片可能看上去有点小，但是如果你右键图片
可能会比较大。
非常抱歉，不是故意弄小图，而是Dz论坛貌似并不支持markdown语法，所以我无法把在笔记上写的文章顺利的搬过来。
版规在这，所以我并不能直接分享我的博客连接，所以，我就导出了PDF文件大家可以下载学习学习
补充：
刚刚发表了一下，好像图片大小正常了~不用下载PDF也能正常观看

相关帖子