Copy the picture on the clipboard in vue or copy the picture URL to upload the picture
1. Global monitoring
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. Only listen to 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'
})
}
}
}
}