vue 实现粘贴上传图片

vue 实现粘贴上传图片

实现原理

mounted阶段监听paste事件，粘贴板的内容在事件对象event.clipboardData.items中

代码实现

mounted() {
  // 监听粘贴事件，上传图片
  document.addEventListener('paste', this.handlePaste)
},
methods: {
  handlePaste(event) {
    let items = event.clipboardData && event.clipboardData.items
    let file
    if (items && items.length) {
      // 检索剪切板items，是个数组
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf('image') !== -1) {
          file = items[i].getAsFile() // file 是剪切板内的图片文件
          // TODO: 自行上传file即可
          break
        }
      }
    }
  }
}