产品提了一个需求，需要用户可以在微信或者qq截屏之后，ctrl+v直接上传图片。在element-ui中目前是无法直接支持的，需要我们监听粘贴事件，然后进行上传操作。

代码：

<el-upload
  drag
  class="upload-demo"
  :on-preview="handlePictureCardPreview"
  :on-success='handleSuccess'
  :on-remove='handleRemove'
  list-type="picture-card"
  :action="uploadUrl"
  :file-list="fileList"
  ref='upload'
  >
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>

Js：

/* base64转file */
dataURLtoFile (dataurl, filename) {
  var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n)
  while(n--){
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], filename, {type:mime})
},

/* 处理粘贴事件 */
handlectrlvEvent (e) {
  if (!this.ctrlvFlag) return
  this.ctrlvFlag = false

  let arr = this.fileList
  let imgs = arr.map(item => {return item.url})
  let length = [...new Set(imgs)].length
  
  if (length >= this.limit) {
    this.$message.error('上传图片超出限制，最大允许上传' + this.limit + '张图片') 
    this.ctrlvFlag = true
    return
  }

  let clipboardData = e.clipboardData

  let items = clipboardData.items

  let item = null

  if (items && items.length) {
    for (let i = 0; i < clipboardData.types.length; i++) {
      if (clipboardData.types[i] === 'Files') {
        item = items[i]
        break
      }
    }
  }

  if (item && item.kind == 'file' && item.type.match(/^image\//i)) {
    const reader = new FileReader()
    reader.readAsDataURL(item.getAsFile())
    reader.onload = () => {
      let name = Date.now()
      let file = this.dataURLtoFile(reader.result, name)

      this.fileList.push({name: name, url: reader.result})

      this.uploadImage(file)
    }
  }
},

/* 手动上传图片 */
uploadImage (file) {
  var fd = new FormData()
  fd.append("file", file)

  this.$http.post(this.uploadUrl, fd, {FORMDATA: true, form:'fileUpload'}).then(res => {
    if (res.data.code == 200) {
      this.fileList.forEach(item => {
        if (item.name == file.name) {
          item.url = this.imgShow + res.data.data[0]
        }
      })

      this.fileList.forEach(item => {
        if (!this.fileList.filter(el => el.name == item.name).length) {
          this.fileList.push(item)
        }
      })
    }

    setTimeout(() => {
      this.ctrlvFlag = true
    }, 1000)
  })
}

mounted () {
  document.addEventListener('paste', this.handlectrlvEvent)
},

beforeDestroy () {
  document.removeEventListener('paste', this.handlectrlvEvent)
}

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/11294