对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 = now
var clipboardData = e.clipboardData; // IE
if (!clipboardData) {
//chrome
clipboardData = e.originalEvent.clipboardData;
}
var items = '';
items = (e.clipboardData || window.clipboardData).items;
let file = null;
if (!items || items.length === 0) {
this.$message.error('当前浏览器不支持粘贴本地图片,请打开图片复制后再粘贴!');
return;
}
// 搜索剪切板items
for (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)
},