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

好的，以下是一个实现拖拽上传文件，点击确定后才上传的`<DragUpload>`组件。 ``` <template> <div> <el-upload ref="upload" class="upload-demo" :action="action" :multiple="multiple" :before-upload="beforeUpload" :file-list="fileList" > <slot name="trigger"> <div class="drag"> <i class="el-icon-upload"></i> <div class="drag-text">将文件拖到此处，或<em>点击上传</em></div> </div> </slot> </el-upload> <div class="button-group"> <el-button type="primary" @click="handleUpload" :disabled="fileList.length === 0">确定</el-button> <el-button @click="clearFiles">清空</el-button> </div> </div> </template> <script> export default { name: 'DragUpload', props: { action: { type: String, required: true }, multiple: { type: Boolean, default: false } }, data() { return { fileList: [] } }, methods: { beforeUpload(file) { return false; }, handleUpload() { this.fileList.forEach(file => { this.$refs.upload.submit(file); }); }, clearFiles() { this.fileList = []; } } } </script> <style> .upload-demo { border: 1px dashed #ccc; border-radius: 2px; padding: 20px; text-align: center; cursor: pointer; } .drag { font-size: 20px; color: #999; margin-bottom: 10px; } .drag-text { margin-top: 10px; } .button-group { margin-top: 10px; text-align: right; } </style> ``` 使用方法如下： ``` <template> <div> <drag-upload action="/upload" :multiple="true"> <template v-slot:trigger> <el-button size="small" type="primary">上传文件</el-button> </template> </drag-upload> </div> </template> <script> import DragUpload from './components/DragUpload'; export default { components: { DragUpload } } </script> ``` 你可以根据自己的需求修改样式和属性。