在①中,粘贴图片,图片能够自动添加到底下el-upload组件的文件列表②。
// 对应①
<el-card>
<el-tooltip content="粘贴图片至此" placement="top">
<input readonly class="pasteImg" @paste.prevent="handleImagePaste" placeholder="粘贴图片">
</el-tooltip>
</el-card>
// el-upload组件
<el-upload drag class="upload-advice" :action="'#'" :auto-upload="false" :limit="10" :on-change="handleBeforeUpload" :before-upload="handleBeforeUpload" :on-error="handleUploadError" :show-file-list="true" ref="upload">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将图片拖到此处,或<em>点击上传</em></div>
<!-- 上传提示 -->
<div class="el-upload__tip" slot="tip">
请上传
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
的图片
</div>
</el-upload>
.pasteImg {
border-radius: 4px;
border: 1px solid #dcdfe6;
color: #606266;
padding: 0 5px;
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
width: 100%;
border-color: #c0c4cc;
height: 36px;
line-height: 36px;
text-align: center;
}
<script>
export default {
data() {
return {
fileSize: 5,
fileType: ["jpg", "png"],
}
},
methods: {
// 粘贴图片
handleImagePaste(event) {
// console.log("event", event);
// console.log("event.clipboardData", event.clipboardData);
const files = event.clipboardData.files[0];
if (!files) {
this.$message.warning("请复制图片再粘贴!");
return;
}
// console.log("files", files);
let timeStamp = new Date().getTime();
// console.log("时间戳", timeStamp);
// 通过ref获取el-upload中的列表,往里面push粘贴的图片,uid是时间戳,需要自己获取
files.uid = timeStamp;
this.$refs.upload.uploadFiles.push({
name: files.name,
percentage: 0,
raw: files,
size: files.size,
status: "ready",
uid: files.uid,
});
},
}
}
</script>