vue のクリップボードに画像をコピーするか、画像の URL をコピーして画像をアップロードします

vue のクリップボードに画像をコピーするか、画像の URL をコピーして画像をアップロードします
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. 入力のみを聞く

<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'
            })
          }
        }
      }
    }

おすすめ

転載: blog.csdn.net/qq_29184685/article/details/119453143
おすすめ