zoukankan      html  css  js  c++  java
  • 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 "返回需要上传的地址";   
    
        } 
    
    }

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

    方法二:在:before-upload 中动态改变url值

    当url为后台返回的数据时使用

    <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()
    
              })
    
            })
    
          }
    
        }
  • 相关阅读:
    hdoj1251 统计难题 字典树
    nyoj322 sort 归并排序,树状数组
    优先队列 如何使用
    字典树(讲解+模版)
    hdoj1069 Monkey and Banana
    ny10 skilng
    hdoj1075 What Are You Talking About
    hdoj1171 Big Event in HDU
    ny613 免费馅饼
    Spring Boot2.0之Admin-UI分布式微服务监控中心
  • 原文地址:https://www.cnblogs.com/zhangyezi/p/13223359.html
Copyright © 2011-2022 走看看