element upload组件，ctrl v粘贴图片自动上传

产品提了一个需求，需要用户可以在微信或者qq截屏之后，ctrl v直接上传图片，网上查了几篇文章参考了其中一篇实现了
参考文章：https://blog.csdn.net/rencaishigepi/article/details/80277810
代码↓

<el-uploaddragclass="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>

/* 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) returnthis.ctrlvFlag = falselet arr = this.fileListlet imgs = arr.map(item => {return item.url})let length = [...new Set(imgs)].lengthif (length >= this.limit) {this.$message.error('上传图片超出限制，最大允许上传' + this.limit + '张图片') this.ctrlvFlag = truereturn}let clipboardData = e.clipboardDatalet items = clipboardData.itemslet item = nullif (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)
}

element upload组件，ctrl v粘贴图片自动上传相关推荐

php编译工具知乎,关于知乎回答问题编辑框用Ctrl+V 粘贴图片是如何实现的详解...
貌似我没有像QQ邮箱之类的装知乎的插件是用HTML5的新功能实现的吗? 看了@朱利安的回答,发现我描述的不够清楚我是用QQ截图之类的工具截的图,然后图片本身是保存在剪切板里的,剪切板中保存的*不 ...
wangEditor 实现ctrl+v粘贴图片并上传、word粘贴带图片
在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...
ctrl+v粘贴快捷键突然不能使用的原因及解决方案
突然发现ctrl+v粘贴快捷键不能使用了,但是右键->粘贴是可以的,我查了网上给的一些解决方案,有丢失了什么dll文件什么的,但是太复杂看不懂,其实这种问题最常见的就是和某个软件的快捷键冲突了. ...
c语言复制粘贴快捷键_大家还知道哪些快捷键方法?如:ctrl+c复制,ctrl+v粘贴
Windows快捷键单独按Windows:显示或隐藏"开始"功能表 Windows+BREAK:显示"系统属性"对话框 Windows+D:显示桌面 Wind ...
wps中ctrl+v粘贴快捷键失灵
在wps文字编辑中,有时会遇到复制粘贴(ctrl+c和ctrl+v)快捷键失灵的情况,如何解决? 在wps当中,使用ctrl+v粘贴快捷键失效,只能进行耻悦右键,点击粘贴才能复制到wps文档当中. 解 ...
element upload组件 onError神坑记录
element upload组件的onError钩子函数返回错误是一个名为Error的对象但要拿到后台的detail报错必须这么写 const detail = JSON.parse(err.mes ...
KindEditor实现WORD粘贴图片自动上传
1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况本文使用的后台是Java.前端为Jsp(前端都一样,后台如果语言不通得自己做 Base6 ...
vue element upload组件 file-list的动态绑定
转载于:https://blog.csdn.net/weixin_44314258/article/details/102487448 (转载并非原创,如有侵权,通知我立马删除) 本文解决,uploa ...
如何屏蔽ctrl + v 粘贴事件，鼠标右键粘贴事件
通常在自己的APP里的密码框,验证码框需要屏蔽复制,粘贴,怎么办呢? 有三种方法: 1 hook 此方法是最完全的,但由于hook是全局的,容易影响到其它代码. 2 子类化文本框, 重写OnPaste ...

element upload组件，ctrl v粘贴图片自动上传

element upload组件，ctrl v粘贴图片自动上传相关推荐

最新文章

热门文章