要在Vue中显示文件上传进度，可以使用axios库来处理文件上传，并使用axios的onUploadProgress方法获取上传进度。
首先，确保你已经安装了axios库。可以使用npm或yarn安装，在终端中运行以下命令：
npm install axios
或者
yarn add axios
接下来，在你的Vue组件中引入axios库，并添加一个处理文件上传的方法。例如，在App.vue组件中：
<template> <div> <input type="file" @change="uploadFile" /> <p v-if="uploadProgress">上传进度: {{ uploadProgress }}%</p> </div> </template> <script> import axios from 'axios'; export default { data() { return { uploadProgress: 0, }; }, methods: { uploadFile(event) { const file = event.target.files[0]; const formData = new FormData(); formData.append('file', file); axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data', }, onUploadProgress: (progressEvent) => { this.uploadProgress = Math.round( (progressEvent.loaded / progressEvent.total) * 100 ); }, }) .then((response) => { console.log(response.data); }) .catch((error) => { console.log(error); }); }, }, }; </script>
上述代码中，我们首先引入了axios库，并在组件的data选项中添加了一个uploadProgress属性，用于存储上传进度。在uploadFile方法中，我们获取到文件对象，并创建一个FormData对象来存储文件数据。然后，我们使用axios库的post方法发送文件上传请求，并传入FormData对象作为请求数据。在请求配置选项中，我们添加了headers选项来设置请求头的Content-Type为multipart/form-data，以支持文件上传。同时，我们使用onUploadProgress方法来监听上传进度事件，并将进度以百分比的形式存储在uploadProgress属性中。最后，我们处理上传成功和失败的回调函数。
在模板中，我们添加了一个文件输入框，当选择一个文件时，会触发uploadFile方法进行文件上传。同时，在模板中我们使用v-if指令来判断是否显示上传进度，如果uploadProgress大于0，则会显示上传进度。
请注意，上述代码中的/upload路径是一个示例，你需要根据你的后端API地址进行相应调整。同时，你需要在后端服务器上处理文件上传请求，将上传的文件保存到服务器或云存储中。具体如何处理文件上传请求，取决于你使用的后端框架和存储解决方案。
