使用before-upload文件上传后展示上传的数据，点击确定按钮返回true实现文件的上传

在 Vue.js 中，`before-upload` 触发器通常用于对即将上传的文件做验证或处理，如文件大小、格式检查等。在这个场景下，`before-upload` 函数会在文件上传前执行，你可以在其中添加数据展示逻辑，例如创建一个临时的状态，然后在文件成功上传后更新显示。

以下是一个示例：

<template>
<div>
  <el-button v-if="showData" @click="handleConfirm()">确定上传</el-button>
  <el-upload
    :before-upload="beforeUpload"
    action="https://jsonplaceholder.typicode.com/posts/"
    ref="upload"
  >
    <el-button slot="trigger">选择文件</el-button>
  </el-upload>
  <!-- 可能显示已上传文件的信息 -->
  <div v-if="uploadedData">
    已上传的文件信息: {{ uploadedData }}
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const showData = ref(false); // 初始状态不显示上传数据
let uploadedData: any = null; // 存储已上传数据

const beforeUpload = async (file: any) => {
  if (!showData.value) {
    console.error('请先点击“确定上传”按钮');
    return false;
  }

  // 假设我们希望在后台预处理文件后再决定是否真正上传
  const processedFile = await someProcessing(file);

  // 上面处理完成后，如果需要上传，设置 uploadedData 并返回 true
  uploadedData = processedFile;
  return true;
};

const handleConfirm = () => {
  if (this.$refs.upload?.ready) {
    this.$refs.upload.submit();
    showData.value = false; // 确认后隐藏按钮
  }
};
</script>

在这个例子中，当你点击 "确定上传" 按钮时，`handleConfirm` 函数会被调用，如果有文件正在准备上传(`this.$refs.upload?.ready`为真)，就会提交上传请求。同时，`beforeUpload`返回的 `processedFile` 将作为已上传数据展示在页面上，直到下次上传或清除。