在vuex中带进度条的FIie上传

Posted 2023-02-23

【中文标题】在vuex中带进度条的FIie上传

【英文标题】：FIie upload with progress bar in vuex

【发布时间】：2020-07-08 00:18:19

【问题描述】：

我无法从 VueX 操作文件中获取组件中的百分比。 它不像反应式 我用这篇文章作为指导 https://serversideup.net/file-upload-progress-indicator-with-axios-and-vuejs/ 但仍然无法得到结果。

Vue 组件

<progress class="col-md-12" max="100" :value="uploadPercentage"></progress>
<script>
export default 
    data() 
            return 
                files: '',
                uploadPercentage: 0,
            
        ,

</script>

Action.js

AddDocument( commit , document) 
        // commit('ADD_ITEM_DOCUMENT', document);
        return new Promise((resolve, reject) => 
            setTimeout(() => 
                axios(
                        method: 'post',
                        url: `/add-file/$document.type/$document.input_name/$document.parent_id`,
                        data: document.file,
                        headers:  'Content-Type': 'multipart/form-data' ,
                        onUploadProgress:function( progressEvent ) 
                            this.uploadPercentage = parseInt( Math.round( ( progressEvent.loaded / progressEvent.total ) * 100 ))
                        .bind(this)
                    )
                    .then(response => 
                        var data =
                            parent_id:document.parent_id,
                            document : response.data.data,
                        ;
                        commit('ADD_ITEM_DOCUMENT', data);
                        resolve(response)
                    ).catch(error => 
                        console.log(error)
                        reject(error)
                    )
            , 2000)
        )
    ,

【问题讨论】：

你不能用this.uploadPercentage来调用组件的变量，把你的函数放在组件的methods对象中。但是如果你使用 vuex 设置 uploadPercentage 状态并在组件中调用它。

谢谢。我用状态和问题解决了:)

太好了，记得把评论标记为有用:)

@FabriceFabiyi 将其发布为答案而不是评论会更合适，这样可以将问题标记为已解决。

【参考方案1】：

你不能用this.uploadPercentage来调用组件的变量，把你的函数放在组件的methods对象中。但是如果你使用 vuex 设置 uploadPercentage 状态并在组件中调用它。