对form中的某一个el-form-item添加 @paste.native 事件,事件绑定方法名 handlePaste也可以在其他控件中添加事件监听,这里在当前form-item 这个块使用了,只有当你点击目标区域时才有效。
<el-form-item label="备注图片" @paste.native="handlePaste"><div style="color: red;">可粘贴上传</div><div class="imgs"><div class="i" v-for="(item, index) in addFormData.imgs" :key="index"><img :src="item" alt=""><i class="el-icon-error" @click="addFormData.imgs.splice(index, 1)"></i></div><el-upload class="avatar-uploader" :action="uploadAction" :show-file-list="false"multiple ref="upload" :headers="uploadHeaders" :on-success="handleUploadSuccess"><i class="el-icon-plus avatar-uploader-icon"></i></el-upload></div></el-form-item>
通过ref来调用自身的方法比如 handlerStart,handlerSuccess这些都是el-upload身上的方法,这里的ref为 upload。
handlePaste(e) {let now = new Date().getTime()if (now - this.timeStep < 500) {this.$message.warning('粘贴速度太频繁!请稍后再试');return}this.timeStep = nowvar 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;}}//判断是否超出上传数量// if (this.addFormData.imgs.length >= this.limit) {// this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); // 图片数量超出// return// }if (file) {this.$refs.upload.handleStart(file); // 将粘贴过来的图片加入预上传队列this.$refs.upload.submit(); // 提交图片上传队列}else{this.$message.error("粘贴内容非图片");}},//图片上传成功handleUploadSuccess(response, file, fileList) {this.addFormData.imgs.push(response.url)},