// template
<el-button size="mini" @click="pasteImgUrl" class="pasteBtn" :disabled="pasteBtnDisabled">粘贴截图</el-button>
<el-button size="mini" @click="cancelImgUrl" class="cancelBtn">取消</el-button>
//methods
// 截图粘贴上传缩略图
pasteImgUrl(){
var _this = this
_this.$message({
type: 'info',
message: '请按CTRL+V自动上传缩略图',
duration: 1500
});
_this.pasteBtnDisabled = true
// 监听 ctrl+v键盘事件
pasteEvent = function (e) {
if ( !(e.clipboardData && e.clipboardData.items) ) {
return;
}
for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
var item = e.clipboardData.items[i];
if (item.kind === "string") {
item.getAsString(function (str) {
// console.log(str);
})
} else if (item.kind === "file") {
var f= item.getAsFile();
let param = new FormData()
param.append('file', f)
let message = _this.$message({
type: 'info',
message: '上传中...',
duration: 0
});
_this.$http.post(自己的上传地址, param, {
headers: { "Content-Type": "multipart/form-data" },
transformRequest: [
function(d) {
return d;
}
]
}).then(res => {
if (res.data.code == 200) {
_this.subjoinForm.imgUrl = res.data.data.url;
message.close()
_this.$message({
type: 'success',
message: '上传成功!',
duration: 1000
});
_this.pasteBtnDisabled = false
// 注销当前粘贴的监听
document.removeEventListener('paste', pasteEvent)
}else{
_this.$message({ type: "error", message: '上传失败!' })
}
});
}
}
}
document.addEventListener('paste', pasteEvent)
},
// 取消缩略图
cancelImgUrl(){
document.removeEventListener('paste', pasteEvent)
this.pasteBtnDisabled = false
this.subjoinForm.imgUrl = ''
},
vue-Ctrl+v粘贴上传剪切板图片
最新推荐文章于 2024-07-09 14:06:10 发布