vue，element。监听快捷键粘贴图片，添加到el-upload的列表。

在①中，粘贴图片，图片能够自动添加到底下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>