安全教育网站建设背景购买友情链接

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