elementui el-upload需要在上传文件前，可以进行弹窗控制是否上传 upload

这篇博客详细介绍了如何利用Element-UI组件库中的<el-upload>组件，结合Vue.js，实现一个具有预览、移除、限制上传数量及确认提示功能的文件上传模块。代码示例中包括了点击上传的处理逻辑、文件移除、文件预览、超出限制的警告以及删除前的确认操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

部分代码是官网的东西element-UI

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary" @click.stop="handleUpload">点击上传</el-button> 
  <!-- stop阻止冒泡事件 -->
</el-upload>

<script>
  export default {
    data() {
      return { };
    },
    methods: {
		handleUpload(){
			this.$confirm('xxx,确认上传文件？', '提示', {
		       confirmButtonText: '确定',
		        cancelButtonText: '取消',
		        type: 'warning'
		      }).then(() => {
		        this.$refs['upload'].$refs['upload-inner'].handleClick() //重点是这句，
		      })
		},
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    }
  }
</script>