element-plus [Component] [upload] upload组件在beforeupdate事件处理函数中不能异步修改data

ql3eal8s  于 5个月前  发布在  其他
关注(0)|答案(3)|浏览(51)

Bug Type: Component

Environment

  • Vue Version: 3.4.21
  • Element Plus Version: 2.6.0
  • Browser / OS: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:102.0) Gecko/20100101 Firefox/102.0
  • Build Tool: Other

Reproduction

  • el-upload

Element Plus Playground

Steps to reproduce

<script setup lang="ts">

const beforeUpload  = async (file: { size: number; name: any }) => {
if (file.size > 10 * 1024 * 1024) {
Message.error('最大支持 10MB 文件')
return Promise.reject('最大支持 10MB 文件')
}
return new Promise(function (resolve, reject) {
setTimeout(() => {
action.value = 'https://up.qiniup.com'
qiniuData.value.key = 'fsdgsdgdsgsdg'
qiniuData.value.token = 'VYpzUUmE_uTDPagcwM6mWJmC6D0LW--f5EAJuWUa:iP7M0ydIAk-RB4pLHOsQTsezoT0=:eyJtaW1lTGltaXQiOiJpbWFnZVwvanBlZztpbWFnZ'
//domain.value = 'fdsfdsf'

setTimeout(()=>{
console.log('resolve')
resolve('success')
},3000)
console.log('setTimeout')
//reject(new Error('fail'))
}, 100)
})
}
</script>

<template>
  <el-upload ref="upload" :action="action" :auto-upload="auto" :file-list="list" :data="qiniuData" :before-upload="beforeUpload" :on-change="onChange" >
upload
  </el-upload>

</template>

What is Expected?

beforeUpload 方法中修改了qiniuData

What is actually happening?

发起上传文件请求的时候没有修改后的参数

Additional comments

(empty)

zwghvu4y

zwghvu4y1#

我也遇到了这个问题,有解决办法吗

wxclj1h5

wxclj1h52#

什么场景下,需要将信息放到异步去修改呢?以提供的 demo 为例,可否这样:

const beforeUpload  = async (file: { size: number; name: any }) => {
if (file.size > 10 * 1024 * 1024) {
        Message.error('最大支持 10MB 文件')
        return Promise.reject('最大支持 10MB 文件')
    }
    action.value = 'https://up.qiniup.com'
    qiniuData.value.key = 'fsdgsdgdsgsdg'
    qiniuData.value.token = 'VYpzUUmE_uT...'
    return new Promise(function (resolve, reject) {
        setTimeout(() => {
             setTimeout(()=>{
             console.log('resolve')
             resolve('success')
             },3000)
            console.log('setTimeout')
            //reject(new Error('fail'))
        }, 100)
    })
}

或者提前将上传需要的信息拿到,放进 data 里面。

这里需要覆盖一个之前的需求:每次上传时, data 里面放当前上传文件的信息,如果使用异步修改,会导致最终上传时,拿到的 data 是最后一个文件的信息,参见 #12016

如果还是需要实现这个需求,则可以使用自定义 httpRequest 的方式完成,参考示例

dbf7pr2w

dbf7pr2w3#

能不能增加配置,哪些数据允许异步修改,哪些不允许

相关问题