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>

Post方法：

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/

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

VueJs - Need to increment the percentage in progress bar when the record is created using Axios.post

axios

vuetify.js

vuejs3