ElementUI实现复制粘贴截图Upload上传服务器交互

<template>
    <div>
        <div class='diatitle' style='margin: 10px 0'>图片上传</div>
        <el-upload :action="upurl" ref="uploadMutiple" :data="myData" list-type="picture-card"
            :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-change='imgchange'
            :file-list="fileList" multiple :on-success="getupload">
            <i class="el-icon-plus"></i>
        </el-upload>
        <div id="preview" @paste="handlePaste">
            <span><i class="el-icon-s-opportunity" style="color:#FB894C"></i>点击此处 将图片按Ctrl+V 粘贴至此处</span>
        </div>
        <el-dialog :visible.sync="innerVisible" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <div @click='getImgUrl'>提交</div>
    </div>
</template>

<script>
    export default {
        components: {},
        data() {
            return {
                upurl: 'https://api110', //上传的地址
                myData: {
                    key: 'Gn1xVdBiTClSSHKZifg0pTQSU5XGagWO'
                }, //上传时附带的额外参数
                fileList: [], //上传的文件列表
                dialogImageUrl: '',
                innerVisible: false,
                upload_list: [], //提交的图片数组
            };
        },
        mounted() {},
        methods: {
            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(); // 提交图片上传队列
            },
            //上传
            imgchange(file, fileList) {
                this.fileList = fileList
                console.log('成功', file, fileList, this.fileList)
            },
            //on-remove 文件列表移除文件时的钩子
            handleRemove(file, fileList) {
                console.log(this.fileList, this.file)
                this.fileList = fileList
                var index = this.upload_list.indexOf(file.url)
                console.log(index)
                this.upload_list.splice(index, 1);
            },
            //on-preview 点击文件列表中已上传的文件时的钩子(预览图片弹窗)
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.innerVisible = true;
            },
            // 提交时打印
            getImgUrl() {
                console.log(this.upload_list)
            },
            // 上传成功之后push到数组
            getupload(res, file, fileList) {
                this.upload_list.push(res.info.url)
                console.log(this.upload_list)
            },
        },
    };
</script>
<style lang="less" scoped>
    .box {}
</style>