有啥方法可以将变量分配给 axios 请求并在 onUploadProgress 中访问它

Posted 2023-02-22

【中文标题】有啥方法可以将变量分配给 axios 请求并在 onUploadProgress 中访问它

【英文标题】：Is there any way to assign a variable to axios request and access it in onUploadProgress有什么方法可以将变量分配给 axios 请求并在 onUploadProgress 中访问它

【发布时间】：2020-05-09 07:47:10

【问题描述】：

我在 Vue 中使用以下代码。在这里，我使用多个 axios 请求同时上传多个文件。在这段代码中一切正常。 但我想要一种方法来查看文件上传的百分比。请参阅具有进度属性的文件对象的数组 this.upload。所以我想为特定对象更新这个属性。所以我可以向用户显示文件上传进度

         for(var file of event.target.files)
            if(!this.isValidFormat(file)) continue;

            var thumb = await this.getThumb(file);
            this.upload.push(
                name: file.name,
                index: parseInt(Math.round(file.size / (1024))),
                size: (file.size / (1024 * 1024)).toFixed(2) + ' MB',
                progress: 0,
                thumbnail: thumb,
                path: null
            );

            const formData = new FormData();
            formData.append('image', file, file.name);
            formData.append('path', 'tmp');
            formData.append('index', increment);
            axios.post('web/upload', formData, 
                onUploadProgress: progressEvent => 
                    //console.log(this.config);
                    const index = parseInt(Math.round(progressEvent.total / 1024));
                    //console.log(index)
                    var u = this.upload.find(u => u.index == index);
                    if(u !== undefined)
                        u.progress = Math.floor((progressEvent.loaded * 100) / progressEvent.total);    
                    

                
            ).then(res => 
                this.upload[res.index].path = res.path;
                console.log(this.upload)
            );
            increment++;
        

【参考方案1】：

您可以使用 vuex 提交值，并通过 getter 在您想要的地方使用它。

https://vuex.vuejs.org/guide/mutations.html

https://vuex.vuejs.org/guide/getters.html

【参考方案2】：

您可以使用 bind() 向函数添加额外的第一个参数，而不是使用箭头函数 onUploadProgress，这将是对相应 file 对象的引用：

  for(var file of event.target.files)
        if(!this.isValidFormat(file)) continue;

        var thumb = await this.getThumb(file);
        const fileObject = 
            name: file.name,
            size: (file.size / (1024 * 1024)).toFixed(2) + ' MB',
            progress: 0,
            thumbnail: thumb,
            path: null
        ;
        this.upload.push(fileObject);

        const formData = new FormData();
        formData.append('image', file, file.name);
        formData.append('path', 'tmp');
        formData.append('index', increment);
        axios.post('web/upload', formData, 
            onUploadProgress: this.calcProgress.bind(this, fileObject)
        ).then(res => 
            this.upload[res.index].path = res.path;
            console.log(this.upload)
        );
        increment++;
    

function calcProgress(fileObj, progressEvent)

     fileObj.progress = Math.floor((progressEvent.loaded * 100) / progressEvent.total);