this.$refs.upload.submit(); not returning response Element-UI

Question

I'm using element-ui and I'm uploading a file with:

this.$refs.upload.submit();

How can I get the reponse from this.$refs.upload.submit();?

I already tried:

.then(response => {
    this.success = true;
})
.catch(errors => {
    if(errors.status === 422 && this.hasError('Exists')) {
        this.Link= true;
    }
    this.success = false;
})

I know the submit() needs some sort of promise. I just don't know what to change, I just want to get the error messages.

Answer 1

I am not to familiar with element-ui but custom components almost always have events that trigger when certain functions finish.

In this case looking at the documentation: https://element.eleme.io/#/en-US/component/upload#upload What you need is on-success or on-error.

So you just have to add functions to your el-upload component:

<el-upload
   :on-error="onError"
   :on-success="onSuccess">

And add the methods to your methods object in vue:

methods: {
      submitUpload() {
        this.$refs.upload.submit();
      },
      onError(){
        console.log("error");
      },onSuccess(){
        console.log("success");
      }
}

An example would be: https://codepen.io/Freshdachs/pen/LYjWpZo