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

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

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

  1. <script setup lang="ts">
  3. const beforeUpload  = async (file: { size: number; name: any }) => {
  4. if (file.size > 10 * 1024 * 1024) {
  5. Message.error('最大支持 10MB 文件')
  6. return Promise.reject('最大支持 10MB 文件')
  7. }
  8. return new Promise(function (resolve, reject) {
  9. setTimeout(() => {
  10. action.value = 'https://up.qiniup.com'
  11. qiniuData.value.key = 'fsdgsdgdsgsdg'
  12. qiniuData.value.token = 'VYpzUUmE_uTDPagcwM6mWJmC6D0LW--f5EAJuWUa:iP7M0ydIAk-RB4pLHOsQTsezoT0=:eyJtaW1lTGltaXQiOiJpbWFnZVwvanBlZztpbWFnZ'
  13. //domain.value = 'fdsfdsf'
  15. setTimeout(()=>{
  16. console.log('resolve')
  17. resolve('success')
  18. },3000)
  19. console.log('setTimeout')
  20. //reject(new Error('fail'))
  21. }, 100)
  22. })
  23. }
  24. </script>
  26. <template>
  27.   <el-upload ref="upload" :action="action" :auto-upload="auto" :file-list="list" :data="qiniuData" :before-upload="beforeUpload" :on-change="onChange" >
  28. upload
  29.   </el-upload>
  31. </template>

What is Expected?

beforeUpload 方法中修改了qiniuData

What is actually happening?

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

Additional comments

(empty)

element-plus

3条答案

按热度按时间
zwghvu4y

zwghvu4y1#

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

赞(0）分享  回复(0）举报  9个月前
wxclj1h5

wxclj1h52#

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

  1. const beforeUpload  = async (file: { size: number; name: any }) => {
  2. if (file.size > 10 * 1024 * 1024) {
  3.         Message.error('最大支持 10MB 文件')
  4.         return Promise.reject('最大支持 10MB 文件')
  5.     }
  6.     action.value = 'https://up.qiniup.com'
  7.     qiniuData.value.key = 'fsdgsdgdsgsdg'
  8.     qiniuData.value.token = 'VYpzUUmE_uT...'
  9.     return new Promise(function (resolve, reject) {
  10.         setTimeout(() => {
  11.              setTimeout(()=>{
  12.              console.log('resolve')
  13.              resolve('success')
  14.              },3000)
  15.             console.log('setTimeout')
  16.             //reject(new Error('fail'))
  17.         }, 100)
  18.     })
  19. }

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

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

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

展开查看全部
赞(0）分享  回复(0）举报  9个月前
dbf7pr2w

dbf7pr2w3#

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

赞(0）分享  回复(0）举报  9个月前
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com