elementUi 上传文件实现action动态改变

elementUi有bug :action="url"不能动态改变

解决方法:

1.action是一个必填参数,且其类型为string,我们把action写成:action,然后后面跟着一个方法名,调用方法,返回你想要的地址,实现动态的去修改上传地址

<el-upload  :action="UploadUrl()"  :on-success="UploadSuccess" :file-list="fileList">

    <el-button size="small" type="primary" >点击上传</el-button>

</el-upload>

// js 代码在 methods中写入需要调用的方法

methods:{

    UploadUrl:function(){

        return "返回需要上传的地址";   

    } 

}

2.组件设计时,并不考虑改变原始值。 并且Vue的一些机制导致了这个问题

<el-upload class="upload-demo" :action="url" :before-upload="test">

  <el-button size="small" type="primary">点击上传</el-button>

</el-upload>

data () {

      return {

        url: '123'

      };

    },

    methods: {

      test (file) {

        return new Promise((resolve, reject) => {

          this.$nextTick(() => {

            this.url = '321'       

            resolve()

          })

        })

      }

    }

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、上传文件实现 两种实现方式: 1、直接action <el-upload class="upload-fil...
    岁末Zzz阅读 13,872评论 2 5
  • 文件的上传主要是用到了elementui中的组件,因为有些细节问题,初次使用时难免会忽略,所以在此分享下; 文件的...
    梁庄十年阅读 14,429评论 1 6
  • 在管理后台系统中,这次使用的是百度编辑器 首先在vue的目录结构static下面,把从网上下载的UE解压放进去,如...
    Light_shallow阅读 12,326评论 0 1
  • 还好,我还健在 还好,你还没老 与世俗一直对抗 让自己遍体鳞伤 来吧,沧桑 掀起你的盖头 让我看看你的模样 沉睡的...
    云鸡楼主阅读 2,962评论 0 3
  • 轻断食第一天。 自昨天中午后不再进食。 晨饮白开水一杯,后以茶为食。一上午神清气爽,安心工作,心情愉悦,无任何饥饿...
    我是无色阅读 1,756评论 0 0

友情链接更多精彩内容