Can't access data() in onUploadProgress event (axios)

Question

I can't access any of my data in data() when I'm in onUploadProgress. It returns "undefined" every time.

<template>
    <el-upload ref="upload"></el-upload>
    <el-button type="primary" :loading="isOnUploading" @click="submitUpload">{{ $t('add') }}</el-button>
</template>

export default {
    data() {
      return {
        isOnUploading: false,
    }
},

methods: {
   async uploadFile(event) {
        const data = new FormData();
        data.append('file', event.file);

        await  this.$axios.post(this.uploadUrl, data, {
            onUploadProgress: function (progressEvent) {
                console.log(this.isOnUploading); // Return undefined
            }
        });
    }

     submitUpload() {
        this.$refs.upload.submit();
      }
}

It gives me the same problem when I call a method, it tells me it's unknown.

Why ?

Your braces are not nested correctly. You define these functions *after* the return statement. — str, Nov 22 '20 at 11:44
@str It was an encoding error in Stackoverflow, I fixed it, thanks — Jeremy, Nov 22 '20 at 11:47
Duplicate of https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback — str, Nov 22 '20 at 11:57
Does this answer your question? [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Jared Smith, Nov 22 '20 at 11:58

score 1 · Accepted Answer · answered Nov 22 '20 at 11:58

1

Bind your vue instance:

    await this.$axios.post(this.uploadUrl, data, {
        onUploadProgress: function (progressEvent) {
            console.log(this.isOnUploading); 
        }.bind(this)
    });

answered Nov 22 '20 at 11:58

bill.gates

14,145
3
19
47

Can't access data() in onUploadProgress event (axios)

1 Answers1