<el-upload class="upload-demo ml" ref="uploadMutiple"
action="http://api110.herbplantist.com/sucai/public/index.php/post/post/uploadFile"
list-type="picture-card" :data="myData" multiple drag
:on-preview="handlePreviewThank" :on-remove="handleRemoveThank"
:file-list="thankFileList" :on-success="handlesuccessThank"
:before-upload="beforeAvatarUploadThank"
accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF">
<i class="el-icon-plus"></i>
</el-upload>
<div id="preview" @paste="handlePaste">
<span><i class="el-icon-s-opportunity" style="color:#FB894C"></i>点击此处<br>将图片按Ctrl+V
粘贴至此处</span>
</div>
// 监听粘贴操作
handlePaste(event) {
const items = (event.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 (!file) {
this.$message.error("粘贴内容非图片");
return;
}
if (this.fileList.length >= this.limit) {
this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); // 图片数量超出
return
}
this.$refs.uploadMutiple.handleStart(file);// 将粘贴过来的图片加入预上传队列
this.$refs.uploadMutiple.submit(); // 提交图片上传队列
},