axios - VueJs - 使用 Axios.post 创建记录时需要增加进度条的百分比

Question

当使用 VueJs 保存记录时，我需要显示进度条。我带来了圆形进度条。现在，我不知道如何计算保存记录的百分比。我正在使用 Axios.post 来保存记录。

为进度条添加代码：

<v-dialog v-if="progressBar" v-model="progressBar" max-width="100" >
                    <v-flex xs10 class="mx-auto progressbar">
                        <v-progress-circular 
                            :rotate="360"
                            :size="100"
                            :width="7"
                            :value="value"
                            indeterminate
                            color="primary" >
                            {{ value }}
                        </v-progress-circular>
                    </v-flex>                   
                </v-dialog>

邮寄方式：

payload.context.contentHeader = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }                
            }   
    Axios.post(payload.createActions, payload.record, payload.context.contentHeader).then(record => {
                let result = record.data, context = payload.context;
        });

Answer 1

使用“onUploadProgress”回调，如下：

axios.post( '/my-url',
      [other parameters],
      onUploadProgress: function( progressEvent ) {
        this.uploadPercentage = parseInt( Math.round( ( progressEvent.loaded / progressEvent.total ) * 100 );
      }.bind(this)
    }

请务必将“this.uploadPercentage”替换为正确的变量。

这是关于该主题的一个很好的资源：

https://serversideup.net/file-upload-progress-indicator-with-axios-and-vuejs/