Element: The [Bug Report] [Bug Report] upload component cannot be dynamically modified in before-upload

Created on 22 Jan 2018 · 9Comments · Source: ElemeFE/element

Element UI version

2.0.11

OS/Browsers version

Chrome 63.0.3239.132

Vue version

2.5.13

Reproduction Link

https://jsfiddle.net/Lfaosg6h/

Steps to reproduce

在upload组件的before upload钩子中修改action上传地址，当前文件上传地址没有变化，再一次上传action才变化

What is Expected?

在before upload钩子中修改action，并让当前文件按新地址上传

What is actually happening?

当前文件依旧按旧地址上传，再次上传文件，action才是修改后的新地址

Source

syue-dev

❤1 👍1

Most helpful comment

你好，你可以这样解决:
https://jsfiddle.net/Lfaosg6h/3/

组件设计时，并不考虑改变原始值。并且Vue的一些机制导致了这个问题，具体可以看这个例子:
https://jsfiddle.net/leopoldthecuber/Lfaosg6h/2/

Hi-Linlin on 23 Jan 2018

👍2

All 9 comments

Translation of this issue:

Element UI version

2.0.11

OS/Browsers version

Chrome 63.0.3239.132

Vue version

2.5.13

Reproduction Link

https://jsfiddle.net/Lfaosg6h/

Steps to reproduce

Modify the action upload address in the upload component's before upload hook. The current file upload address does not change, and the action is uploaded again.

What is Expected?

Modify the action in the before upload hook and allow the current file to be uploaded by the new address

What is actually happening?

The current file is still uploaded by the old address, and the file is uploaded again. Action is the new address after the modification.

element-bot on 22 Jan 2018

你好，你可以这样解决:
https://jsfiddle.net/Lfaosg6h/3/

组件设计时，并不考虑改变原始值。并且Vue的一些机制导致了这个问题，具体可以看这个例子:
https://jsfiddle.net/leopoldthecuber/Lfaosg6h/2/

Hi-Linlin on 23 Jan 2018

👍2

@Hi-Linlin 感谢你的解决方案

syue-dev on 23 Jan 2018

链接失效了,遇到这个问题了,能麻烦再放下链接么,谢谢

isuye on 15 Apr 2019

@isuye

<el-upload class="upload-demo" :action="url" :before-upload="test">
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>
var Main = {
    data () {
      return {
        url: '123'
      };
    },
    methods: {
      test (file) {
        return new Promise((resolve, reject) => {
          this.$nextTick(() => {
            this.url = '321'        
            resolve()
          })
        })
      }
    }
  }

syue-dev on 15 Apr 2019

👍1

@286506460
谢谢

isuye on 15 Apr 2019

链接打不开？？？

jim888666 on 10 Jun 2019

@DaiChongyu this.Api = 321

syue-dev on 7 Dec 2019

data: {
                url: ''
            },
            mounted: function() {
                this.changeUrl();
            },
            methods: {
                changeUrl: function () {
                    this.$nextTick(() => {
                        this.url = '321';
                    })
                },
            }

放到 mounted 里可以避免第一次不改变, 我这是引入模式 changeUrl函数放到其他函数里依然会导致第二次才能改变成功