vue 上传文件（视频）的进度条，监听axios请求的进度。

这个我就不写简单demo了，直接上核心代码。代码：上传按钮：<input type="file" accept="image/*" @change="uploadFile($event,item)" class="uploadImg"/>进度条：iview的组件。<Progress text-inside :percent="item.fileUploadPercent" /&g

草字

5090人浏览 · 2022-02-09 17:19:14

草字 · 2022-02-09 17:19:14 发布

这个我就不写简单demo了，直接上核心代码。

代码：

上传按钮：

<input type="file" accept="image/*" @change="uploadFile($event,item)" class="uploadImg"/>

进度条：iview的组件。

<Progress text-inside :percent="item.fileUploadPercent" />

监听进度的核心代码，onUploadProgress：

                onUploadProgress: (progressEvent)=>{
                    if (progressEvent.lengthComputable) {   //是否存在进度
                        var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
                        // this.progressBar = percentCompleted
                        console.log('进度：',percentCompleted)
                        item.fileUploadPercent=percentCompleted;
                        this.$forceUpdate();
                    }
                },

        //上传图片，视频。 type：1图片(默认)，2视频
        uploadFile(e,item,type=1){
            let file = e.target.files[0];
            // console.log('文件：',file);
            let formData = new FormData();
            let configs = {
                headers:{
                    "Content-Type":'multipart/form-data',
                    "apiKey": getToken(),
                    'lang':'zh-CN',
                },
                onUploadProgress: (progressEvent)=>{
                    if (progressEvent.lengthComputable) {   //是否存在进度
                        var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
                        // this.progressBar = percentCompleted
                        console.log('进度：',percentCompleted)
                        item.fileUploadPercent=percentCompleted;
                        this.$forceUpdate();
                    }
                },
            }
            formData.append('file',file);
            formData.append('lang',this.lang=='zh'?1:2);//1中文，2英文
            formData.append('type',type);//1图片，2视频
            item.loading=true;
            this.$forceUpdate();
            axios.post(config.baseUrl+'/file/upload',formData,configs).then(data=>{
                let res=data.data;
                if(res.code=='000000'){
                    this.$Message.success(res.msg);
                    if(item && item.type){
                        item.data=res.data.url;
                    }else{
                        this.box.imgUrl=res.data.url;
                    }
                    item.loading=false;
                    this.$forceUpdate();
                }else{
                    this.$Message.error(res.msg);
                }
            })
        },

说明：configs的onUploadProgress就是axios请求的进度回调函数，参数包含了当前请求的传输进度。通过传输的总长度大小和当前进度大小，计算得出百分比时的进度条长度。

如果觉得有点难，可以参考如下文章：vue+express实现文件上传，显示上传进度条_柯晓楠-CSDN博客_vue上传文件进度条