element-ui 粘贴上传图片

组件代码如下:

<el-upload
    ref="upload"
    class="upload-demo"
    drag
    :headers="uploadHeaders"
    :data="uploadData"
    :action="uploadUrl"
    :on-error="onUploadError"
    multiple
    style="margin:0 auto"
    >
    <i class="el-icon-upload" />
    <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</el-upload>

监听全局paste事件

mounted() {
    document.addEventListener('paste', this.onPasteUpload)
},
beforeDestroy() {
    document.removeEventListener('paste', this.onPasteUpload)
},

最后处理paste事件

onPasteUpload(e) {
  const upload = this.$refs.upload
  if (!upload) {
    return
  }
  const items = e.clipboardData.items
  for (const item of items) {
    if (item.type === 'image/png') {
      const file = new File([item.getAsFile()], new Date().getTime() + '.png')
      upload.handleStart(file)
    }
  }
  upload.submit()
}
const file = new File([item.getAsFile()], new Date().getTime() + '.png')

这里重写了文件名,因为File是一个不可变对象,而且chrome浏览器复制的话文件名发现始终为image.png(如果后台会对文件重命名的话请无视)

Pebble 标签多个属性
Jackson 添加额外的属性