js中paste粘贴事件

最新推荐文章于 2024-04-18 09:42:07 发布

zyfl

最新推荐文章于 2024-04-18 09:42:07 发布

阅读量6.1k

点赞数 2

分类专栏：原生js

本文链接：https://blog.csdn.net/m0_37743842/article/details/105355280

版权

原生js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

业务需求

在评论输入框粘贴图片后实现图片自动上传

实现思路

用富文本编辑器实现
监听输入框的粘贴事件

考虑到项目其他地方没有富文本的需求，引入富文本增大代码大小，因此选择js方法paste粘贴事件

paste事件

paste：在发生粘贴操作时触发

绑定的元素不一定是input，普通的div也是可以绑定的，如果是给document绑定了，就相当于全局了，任何时候的粘贴操作都会触发

事件对象

操作的数据放在clipboardData对象中的，在ie中这个对象通过window.clipboardData来访问，在其它浏览器中则通过事件处理函数的参数来访问。

获取事件对象：

handlePaste(event) {
var clipboardData = event.clipboardData || window.clipboardData
}

粘贴事件提供了一个clipboardData的属性，如果该属性有items属性，那么就可以查看items中是否有图片类型的数据了。

clipboardData介绍

介绍一下clipboardData对象，它实际上是一个DataTransfer类型的对象，DataTransfer 是拖动产生的一个对象，但实际上粘贴事件也是它。
clipboardData的属性介绍：

属性	类型	说明
dropEffect	String	默认是 none
effectAllowed	String	默认是 uninitialized
files	FileList	粘贴操作为空List
items	DataTransferItemList	剪切板中的各项数据
types	Array	剪切板中的数据类型

items介绍

items是一个DataTransferItemList对象，自然里面都是DataTransferItem类型的数据了。

属性

items的DataTransferItem有两个属性kind和type:

属性	说明
kind	一般为string或者file
type	具体的数据类型，例如具体是哪种类型字符串或者哪种类型的文件，即MIME-Type

方法

方法	参数	说明
getAsFile	空	如果kind是file，可以用该方法获取到文件
getAsString	回调函数	如果kind是string，可以用该方法获取到字符串，字符串需要用回调函数得到，回调函数的第一个参数就是剪切板中的字符串

types介绍

types常见的值：text/plain, text/html, files

值	说明
text/plain	普通字符串
text/html	带有样式的html
files	文件(例如剪切板中的数据)

Demo

  methods: {
    // 粘贴监听图片上传
    handlePaste (event) {
      // console.log(event)

      var clipboardData = event.clipboardData || window.clipboardData
      console.log(clipboardData) // 查看clipboardData
      const items = clipboardData.items
      const types = clipboardData.types
      let file = null

      var text = clipboardData.getData('text/plain')

      // 搜索剪切板items
      for (let i = 0; i < items.length; i++) {
        console.log(items[i])
        if (items[i].type.indexOf('image') !== -1) {
          file = items[i].getAsFile()
          // break
        } else {
          // clipboardData.clearData(items[i].type)
          var str = clipboardData.getData(items[i].type)
          console.log(str)
        }
      }

      // 搜索剪切板types
      for (let i = 0; i < types.length; i++) {
        console.log(types[i])
      }

      if (!file) {
        return
      }
      this.isPasteImg = true
      // 此时file就是我们的剪切板中的图片对象
      let form = new FormData()
      form.append('file', file)
      let that = this
      api.commonInterface(
        that.uploadUrl,
        'Post',
        function (res) {
          that.uploadSuccess(res.data, file, text)
        },
        form
      )
    },