el-upload组件data属性每次提交，前端都是实时数据后台却是上次提交的旧数据

最新推荐文章于 2025-08-21 11:53:31 发布

原创最新推荐文章于 2025-08-21 11:53:31 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

本文介绍在Vue中使用el-upload组件时，如何解决数据更新后上传到后台总是携带旧数据的问题，通过ref和data属性的正确引用实现前后端实时数据同步。

或不多说直接上代码

//我的el-upload

<el-upload
        ref="upload"
        :limit="1"
        accept=".zip"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        :data="{aircraftNo:this.upload.aircraftNo,aircraftType:this.upload.aircraftType}"
        drag
      >


//data相关配置
 upload: {
        //飞机机型
        aircraftType: null,
        //接收参数
        aircraftNo: null,
      },

//上传文件按钮
submitFileForm() {
    //之前是这样写的 
    //this.upload.aircraftType = this.elCascader.dataType;
    //这样写前台确实是实时数据，但是后台确总是上一次提交的旧数据
    //原因:el-updata组件中的data属性，是submit后才会取到更新的数据，每次提交所以才会都是旧数据
      采用如下方法 分配引用即可直接前后台均是实时数据。

    //采用分配引用方式上传 后台即可得到实时数据
    this.$refs.upload.data.aircraftType = this.elCascader.dataType;
    this.$refs.upload.data.aircraftNo = this.elCascader.dataNo;
}