无法在 onUploadProgress 事件中访问 data() (axios)

Question

当我在onUploadProgress 中时，我无法访问我在data() 中的任何数据。它每次都返回“未定义”。

<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();
      }
}

当我调用一个方法时，它给了我同样的问题，它告诉我它是未知的。

为什么？

Answer 1

绑定你的 vue 实例：

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