vue2.x 复制粘贴文件路径上传文件 (element-ui)
最近开发的产品,需要拥有上传发票的功能,原本是点击上传按钮选择文件上传,经理问:能不能复制粘贴文件然后直接上传?这样就方便多了!
能!当然能!互联网时代无所不能!只有你想不到没有code 做不到的。上代码:
第一步:需要一个输入框,给用户复制粘贴文件路径:@paste.native 监听粘贴的动作
<el-input style="width:400px" clearable @paste.native="onPasteUpload($event)" placeholder="可在此处粘贴(ctrl+v / command+v)文件内容"></el-input>
第二步:在粘贴回调中获取粘贴内容:
onPasteUpload(event){ let items = event.clipboardData && event.clipboardData.items; let file = null if (items && items.length) { // 检索剪切板items if (items[0].kind == 'file') { file = items[0].getAsFile() }else{ this.msgError('粘贴内容不是文件内容,请重新复制后粘贴') } } if (!file) { return; } //上传文件方法写在这里 this.upload({action:uploadInvoiceUrl,filename:'file',file:file}) },
这样就 okk 啦!代码不复杂,复杂的是人心!
作者:胡倩倩0903
本文版权归作者和博客园共有,欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。
posted on 2022-03-17 16:35 kitty20180903suzhou 阅读(573) 评论(0) 编辑 收藏 举报