Vue3 Element UI Plus el-upload 组件上传参数 data 为空怎么办？

Question

vue3, element ui Plus 中的 el-upload组件，上传参数data没数据

<template>
    <el-upload 
        v-model:file-list="fileList" 
        class="upload-demo"
        :action="actionUrl"
        :data="data"
        :headers="data"
        :before-upload="beforeUpload"
        list-type="picture"
    >
        <el-button type="primary">上传文件</el-button>
    </el-upload>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { policy } from './policy'
import { ElMessage } from "element-plus";

const data = reactive({})
const actionUrl = ref("")
const fileList = ref<UploadUserFile[]>([])

const beforeUpload = (file: File) => {
    return policy(file.name).then(res => {
        const { url, ...resData } = res.data
        Object.assign(data, resData);
        actionUrl.value = url;
    })
}
</script>

export const policy = (fileName) => {
    return baseService.get('/thirdparty/minio/policy', fileName);
}

可以看到data和headers是同一个对象，
自动上传文件data没有参数headers有参数

第二次上传文件data也只是上次的参数

应该怎么样data才能正常携带参数？

Answer 1

把 beforeUpload 方法改成 async/await 的试试

const beforeUpload = async (file: File) => {
    const res = await policy(file.name)
    const { url, ...resData } = res.data
    Object.assign(data, resData)
    actionUrl.value = url
}