Есть ли способ присвоить переменную ax ios request и получить к ней доступ в onUploadProgress - PullRequest
Новая
       41

Есть ли способ присвоить переменную ax ios request и получить к ней доступ в onUploadProgress

0 голосов
/ 23 января 2020

Я использую следующий код в Vue. Здесь я загружаю несколько файлов одновременно, используя несколько запросов ax ios. Все работает нормально в этом коде. Но я хочу, чтобы увидеть, сколько% файла загружено. Смотрите, есть массив this.upload файлов объекта, имеющего свойство progress. Поэтому я хочу обновить это свойство для указанного объекта c. чтобы я мог показать пользователю прогресс загрузки файла 

         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++;
        }

Ответы [ 2 ]

0 голосов
/ 23 января 2020

Вместо использования функции стрелки для onUploadProgress - вы можете использовать bind(), чтобы добавить дополнительный 1-й аргумент в вашу функцию, который будет ссылкой на соответствующий 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);    
}
0 голосов
/ 23 января 2020

Вы можете зафиксировать значение с помощью vuex и использовать его там, где хотите, с геттером.

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

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

...