vue2 弹框打卡 el-upload 实现拖拽上传文件 点确定后才上传 这个功能 写一个组件

好的，我可以为你编写一个Vue2的弹框组件，其中包含了el-upload组件和一个确认上传按钮。以下是代码示例：

<template>
  <div class="upload-dialog" v-show="visible">
    <el-dialog title="上传文件" :visible.sync="visible" @close="handleClose">
      <el-upload
        class="upload-demo"
        ref="upload"
        :action="uploadUrl"
        :file-list="fileList"
        :auto-upload="false"
        drag
        multiple
        @change="handleChange"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">支持多文件上传</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpload">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "UploadDialog",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    uploadUrl: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleClose() {
      this.fileList = [];
    },
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-5);
    },
    handleUpload() {
      this.$refs.upload.submit();
      this.visible = false;
      this.fileList = [];
    }
  }
};
</script>

<style>
.upload-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  background-color: rgba(0, 0, 0, 0.5);
}

.el-upload__tip {
  margin-top: 10px;
}
</style>

在这个组件中，我们引入了`el-dialog`和`el-upload`组件，并且设置了一个确认上传按钮。`el-upload`组件设置了`auto-upload`为`false`，这意味着文件不会在选择后自动上传。`el-upload`组件还启用了拖拽上传和多文件上传功能。

在`handleUpload`方法中，我们调用了`submit()`方法来上传文件，然后将弹框关闭并清空文件列表。

你可以根据需要调整此组件的样式和功能。