vue中复制剪贴板的图片或者复制图片网址上传图片

vue中复制剪贴板的图片或者复制图片网址上传图片
1、全局监听

const that = this
document.addEventListener('paste', function (event) {
      const items = event.clipboardData && event.clipboardData.items
      console.log(items)
      let file = null
      if (items && items.length) {
        for (let i = 0; i < items.length; i++) {
          if (items[i].type.includes('image')) { // 如果是图片类型直接上传
            file = items[i].getAsFile()
            console.log(file)
            that.imgupload(file) // 上传方法
            break
          } else if (items[i].type.includes('text')) { // 如果是文本类型不做处理，input中会显示文本内容（可处理作为图片URL地址上传，点击上传按钮后上传图片）
            break
          } else { // 如果是其他类型的提示错误
            this.$notify({ // Element-UI的Notification组件
              title: '无法加载图片',
              type: 'warning',
              message: '请粘贴图片URL或者粘贴剪贴板图片',
              duration: 5000,
              position: 'bottom-right'
            })
          }
        }
      }
    })

2、仅监听input

<b-input
                ref="input"
                v-model="urlInput"
                placeholder="粘贴图片URL或者粘贴剪贴板图片"
                type="url"
                @paste.native.capture="pasting"
              />

pasting (event) {
      const items = event.clipboardData && event.clipboardData.items
      let file = null
      if (items && items.length) {
        for (let i = 0; i < items.length; i++) {
          if (items[i].type.includes('image')) { // 如果是图片直接识别
            file = items[i].getAsFile()
            console.log(file)
            this.imgupload(file)
            break
          } else if (items[i].type.includes('text')) {
            break
          } else {
            this.$notify({
              title: '无法加载图片',
              type: 'warning',
              message: '请粘贴图片URL或者粘贴剪贴板图片',
              duration: 5000,
              position: 'bottom-right'
            })
          }
        }
      }
    }