el-upload组件实现ctrl+v黏贴上传文件

elementui的el-upload组件真的很好用
可以上传图片，pdf，word文档，excel等文件，点击文件可以下载，若是文件类型是图片则在新窗口打开进行展示，可以上传单个文件或者多个文件，可以控制上传文件的数量，可以一次性选中多个文件进行批量上传，可以复制多个文件，进行批量黏贴上传，
上传一波效果图

<el-drawer title="修改申请" :visible.sync="showEdit" size="70%" @paste.native="pasteMe"@closed="cancel()" :destroy-on-close="true" :lock-scroll="false" ><el-upload id="upfile_loading" class="upload-demo" ref="upload" action="" :on-remove="handleRemove" accept="doc,docx,.csv,.xlsx,.xls,.zip,.rar,.png,.jpg,.pdf,.jpeg" :file-list="filelist" :http-request="uploadfile" :auto-upload="true" :limit="1" :on-exceed="handleExceed" list-type="text" :on-preview="downfile" ><el-button slot="trigger"  type="primary">选取文件</el-button><div slot="tip" class="el-upload__tip">只能上传文件(doc,docx,csv,xlsx,xls,zip,rar,png,jpg,pdf,jpeg)文件,不超过10MB,只允许上传一份文件</div></el-upload>
el-drawer/>

一、上传文件

:http-request="uploadfile"

//自定义文件上传接口uploadfile(fileObj) {let formData = new FormData();const loading = this.$loading({lock: true,text: "正在上传中，请耐心等待！",target: document.querySelector("#upfile_loading"),});formData.set("file", fileObj.file);//这里使用封装的上传文件的接口this.$http.post("upload/uploadFile", formData).then((res) => {if (res.data.code == 0) {//将上传的文件的name和url保存在数组filelist里面this.filelist.push({name: res.data.data.fileName,url: res.data.data.filePath,});//将上传的文件的url保存在另一个数组newFiles里面for(let i=0;i<this.filelist.length;i++){this.newFiles[i]=this.filelist[i].url}//文件url转为字符串，赋值给form表单this.editForm.file=this.newFiles.toString();this.$message({ type: "success", message: res.data.msg });loading.close();} else {this.$message.error(res.data.msg);loading.close();}}).catch((e) => {this.$message.error(e.message);});},

二、对上传的文件进行移除

:on-remove="handleRemove"

 //移除上传文件handleRemove(file) {//上传的文件都会有一个uid，可借此将删除文件的uid与文件数组进行比对for(let i=0;i<this.filelist.length;i++){if(file.uid===this.filelist[i].uid){this.filelist.splice(i,1);}}},

三、支持上传文件的类型

accept="doc,docx,.csv,.xlsx,.xls,.zip,.rar,.png,.jpg,.pdf,.jpeg"

四、是否支持多选

若是希望el-upload组件支持上传多个文件，可以加上 multiple 属性

multiple

五、对上传的文件数量进行限制

:limit="3"
比如附件最多只能上传3个，可以给el-upload添加 limit 属性

limit

上传的附件数量超过限制时的弹窗提示:on-exceed="handleExceed"

handleExceed() {this.$message.warning("只能上传3个附件");
},

六、点击上传的文件进行下载

:on-preview="downfile"

//点击已上传文件下载downfile(file){if (file.url){window.open(file.url)//若是文件类型为图片，则是新开一个窗口进行展示}},

七、ctrl+v黏贴上传文件

对el-drawer组件进行黏贴事件监听 @paste.native="pasteMe"

 //监听附件黏贴上传pasteMe(e){var clipboardData = e.clipboardData; // IEif (!clipboardData) {//chromeclipboardData = e.originalEvent.clipboardData;}var items='';items = (e.clipboardData || window.clipboardData).items;let file = null;if (!items || items.length === 0) {this.$message.error('当前浏览器不支持本地或请打开图片再复制');return;}// 搜索剪切板itemsfor (let i = 0; i < items.length; i++) {// if (items[i].type.indexOf('image') !== -1) {//此行代码注释掉，可以上传所有类型的文件file = items[i].getAsFile();// break;// }}let fileData={};fileData.file=file;if(file){//对复制黏贴的类型进行判断，若是非文件类型，比如复制黏贴的文字，则不会调用上传文件的函数this.uploadfile(fileData);//再次调用上传文件的函数}},