element ui 的upload组件 参数绑定data不生效、延时作用、参数接收不正确为上一次的值、上传一次后点击上传不生效的问题的问题

问题描述

首先, 组件ui没有问题, 是你写的代码可能有问题,下面是一个例子

// upload组件
 <el-upload
       ref="upload"
      :action="`${upload_host}/upload/save/audio`"
       :data="{ id: id , cover: cover }"
       style="margin:0  2rem"
       :on-success="onSuccessUpload"
       accept=".mp3"
       multiple
       :limit="8"
       :on-error="onError"
       :auto-upload="false"
     >
// 提交表单前  修改cover的值, 发现后台第一次总是接收不到数据, 之后每次接收都是前一次的数据
onSubmit() {
  this.cover = 'http://xxxxx'
  this.$refs.upload.submit()
}

产生原因

/*我们看这段代码, 实际上他是有错误的*/
onSubmit() {
  this.cover = 'http://xxxxx'
  // 异步执行,在cover的值发生改变之前,upload的post请求就已经发送了, 因此后端总是接收不到正确的值
  this.$refs.upload.submit() 
}

解决办法

利用Promise

/*重写上面的逻辑 ,利用promise同步代码的执行顺序,保证程序正确执行*/
async onBeforeSubmit() {
    this.cover = 'http://xxxxx'
    return true
},
onSubmit() {
	this.onBeforeSubmit().then( (res)=>{  this.$refs.upload.submit() } )
}

展望

解决上传一次后点击上传不生效的问题

this.$refs.upload.uploadFiles //为上传文件的数组集合
// 通过下面的代码可获取数组内文件的状态 'ready' 就绪未上传  'success'成功已经上传
this.$refs.upload.uploadFiles[0].status