element plus upload组件获取上传时的文件参数 使用setup语法糖

在Element Plus库的upload组件中，如果你想在用户开始上传文件时获取到文件的相关信息，可以使用Vue 3的Composition API提供的`setup`语法糖。`setup`函数允许你在单文件组件中定义独立的、状态相关的逻辑。

首先，你需要安装Element Plus以及Vue 3，并在组件文件中导入需要的部分：

<template>
  <el-upload
    ref="upload"
    :action="uploadUrl"
    :on-change="handleChange"
    ...其他props...
  >
    <!-- 指定默认值 -->
    <el-button slot="trigger">选择文件</el-button>
  </el-upload>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElUpload } from "element-plus";
import { ElButton } from "element-plus/button";

const uploadRef = ref<ElUpload>();
let file: File | null = null;

// 获取上传时的文件参数
function handleChange(file) {
  file && (file = file.file);
  // 在这里处理文件信息，例如:
  console.log('当前选中的文件:', file);
}

onMounted(() => {
  uploadRef.value.$on("change", handleChange); // 监听上传变化事件
});
</script>

在这个例子中，我们创建了一个ref变量`file`用于存储上传的文件。当用户选择文件并触发`onChange`事件时，`handleChange`函数会被调用，此时你可以访问到`file`参数。记得在组件卸载前移除监听，以避免内存泄漏：

<script setup>
...
beforeUnmount(() => {
  uploadRef.value.$off("change", handleChange);
})
</script>