利用图床API_实现JavaScript粘贴上传图片

利用图床API_实现JavaScript粘贴上传图片 最后编辑:2021-11-22
增值服务: 自动发货 使用说明 安装指导 环境配置二次开发BUG修复

承接上文,把上文拆分讲详细一点,如果误差,还请担待。

好了那我们开始

我们先定义一个事件,

* 在全局,粘贴,触发事件

大致是这样:

  1. <script>
  2.         document.addEventListener(‘paste’,function (event) {
  3.             console.log(‘触发了’);
  4.         })
  5.    </script>

然后我们试试看:

1637510786-b0ecf6918fbb10c

触发了,然后我们下一步我们都知道,如果function ()没有携带参数,那么会返回一个`function (event)`,我们打印一下。

1637510789-e45132cee5c3a48

可以看到,这是打印成功了的。

在粘贴事件中,提供了一个属性叫:clipboardData  中会有一个items 属性存了剪贴板的各种数据,我们可以用`getAsFile()`给他打印出来 `items`是个数组,所以我们要加上[0],

试着打印一下:

1637510791-ea5abf1642dba9b

1637510792-af17af5ba539881

1637510793-b911fd74c129dcc

正确无误,那么图片数据是得到了。

然后我们把他打印到页面上试试,由于不太会,我就百度了百度。

1637510796-ed9ebf16100a105

1637510798-16a6fd705169714

没有问题,然后下一步 `创建FileReader`

FileReader是一种异步文件读取机制我也不算是特别了解。

1637510798-0f07f8e8e9e5460

然后再使用

`readAsDataURL(file)`

`readAsDataURL(file)读取文件内容,结果用data:url的字符串形式表示`

1637510801-328d7e043c3ac4a

读取完成后我们测试打印一下:

1637510799-cfb29ecc111254c

得到了base64,然后新建个img标签,打印上去:

1637510802-64e0f506d986e51

1637510807-879b2bc41bfc5ce

没问题

回到正题,这好像只实现了 粘贴显示,但是上传好像还没做到,先不管这么多了待会更新,希望通过本文,能够给你带来灵感。

下面贴上代码,直接复制本地都能使用


<!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文件 大家可以下载学习学习

 

本站所有资源来源于用户投稿及网络,如“侵权”请邮件联系邮箱:s4aimei@Qq.com
康乐源码网 » 利用图床API_实现JavaScript粘贴上传图片
  • 2021-11-22Hi,初次和大家见面了,请多关照!

发表评论

  • 6会员总数(位)
  • 1883资源总数(个)
  • 1204本周发布(个)
  • 0 今日发布(个)
  • 662稳定运行(天)

提供最优质的资源集合

立即查看 了解详情
升级SVIP尊享更多特权立即升级