vue如何在上传图片后显示上传进度？

要在Vue中实现上传图片后显示上传进度，可以通过以下方式来实现：

一、引入并配置axios以支持进度监控

前面实现图片上传时已经用到了axios，现在需要对它进行一些额外配置来获取上传进度信息。

首先，确保已经安装了axios：

npm install axios

然后在Vue组件中引入axios并进行如下配置：

import axios from 'axios';

// 创建一个axios实例，以便可以设置全局的配置
const instance = axios.create();

// 设置请求拦截器，在请求发送前添加一些配置
instance.interceptors.request.use(config => {
    // 这里添加一个onUploadProgress属性，它是一个函数，用于监听上传进度
    config.onUploadProgress = progressEvent => {
        if (progressEvent.lengthComputable) {
            // 计算上传进度百分比
            let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
            // 可以在这里将进度信息传递给组件的data中定义的变量，以便在模板中显示
            console.log(`上传进度：${percentCompleted}%`);
        }
    };
    return config;
});

export default {
    // 组件的其他配置和方法等
    //...
    methods: {
        submitUpload() {
            const formData = new FormData();
            formData.append('image', this.selectedFile);

            // 使用配置好的axios实例来发送上传请求
            instance.post('/api/upload', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            })
           .then(response => {
                console.log('图片上传成功', response);
            })
           .catch(error => {
                console.log('图片上传失败', error);
            });
        }
    }
};

在上述代码中：

• 通过axios.create()创建了一个axios实例，这样可以方便地设置全局的配置。
• 在请求拦截器中，给每个请求添加了onUploadProgress属性，它是一个函数，当上传事件发生且可计算上传进度时（lengthComputable为true），会计算出上传进度的百分比，并可以将此信息传递给组件中的相关变量（这里只是简单在控制台打印了进度，后续会详细说明如何在模板中显示）。

二、在组件模板中显示上传进度

在Vue组件的模板部分，可以添加一个元素来显示上传进度。例如：

<template>
    <div>
        <input type="file" @change="handleFileUpload" />
        <button @click="submitUpload">上传图片</button>
        <p>上传进度：{{ uploadProgress }}%</p>
    </div>
</template>

这里添加了一个<p>标签来显示上传进度，通过{{ uploadProgress }}绑定了组件data中的一个变量。

三、在组件的data和methods中更新进度相关设置

为了能让模板正确显示上传进度，需要在组件的data和methods部分进行相应的设置。

在data中定义uploadProgress变量来存储上传进度的值：

export default {
    data() {
        return {
            selectedFile: null,
            uploadProgress: 0
        };
    },
    //... 其他方法如handleFileUpload等
    methods: {
        submitUpload() {
            const formData = new FormData();
            formData.append('image', this.selectedFile);

            instance.post('/api/upload', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            })
           .then(response => {
                console.log('图片上传成功', response);
            })
           .catch(error => {
                console.log('图片上传失败', error);
            });
        },
        // 添加一个方法来更新上传进度的值
        updateUploadProgress(percent) {
            this.uploadProgress = percent;
        }
    }
};

在请求拦截器中计算出上传进度百分比后，需要调用updateUploadProgress方法来更新data中的uploadProgress变量的值，这样模板中的{{ uploadProgress }}就能实时显示出正确的上传进度了。修改请求拦截器中的相关代码如下：

instance.interceptors.request.use(config => {
    config.onUploadProgress = progressEvent => {
        if (progressEvent.lengthComputable) {
            let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
            // 调用updateUploadProgress方法更新进度值
            this.updateUploadProgress(percentCompleted);
            console.log(`上传进度：${percentCompleted}%`);
        }
    };
    return config;
});

但这里会出现一个问题，在请求拦截器中使用this时，它指向的不是组件实例，所以需要通过一些方式来解决这个问题。一种常见的解决方法是使用箭头函数来定义请求拦截器，这样this就会正确指向组件实例。修改后的请求拦截器代码如下：

instance.interceptors.request.use((config) => {
    config.onUploadProgress = (progressEvent) => {
        if (progressEvent.lengthComputable) {
            let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
            // 调用updateUploadProgress方法更新进度值
            this.updateUploadProgress(percentCompleted);
            console.log(`上传进度：${percentCompleted}%`);
        }
    };
    return config;
}, (error) => {
    return Promise.reject(error);
});

通过以上步骤，就可以在Vue中实现上传图片时显示上传进度的功能了，用户可以直观地看到图片上传的进展情况。