在现代Web应用开发中，文件上传和下载功能是常见需求，而向用户展示操作进度能极大提升用户体验。Vue与Element-plus的组合为实现这一功能提供了便捷途径。

来看文件上传进度显示。在Vue项目中使用Element-plus的上传组件十分方便。我们可以通过设置它的属性和事件来实现进度展示。例如，利用:before-upload钩子函数对上传的文件进行一些预处理，如格式检查等。而要获取上传进度，只需监听组件的:on-progress事件。该事件会返回一个包含进度信息的对象，我们可以将这个进度值绑定到Vue的响应式数据上。

<el-upload
  class="upload-demo"
  action="your-upload-url"
  :on-progress="handleUploadProgress"
  :before-upload="beforeUpload">
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

export default {
  data() {
    return {
      uploadProgress: 0
    }
  },
  methods: {
    handleUploadProgress(event) {
      this.uploadProgress = event.percentage;
    },
    beforeUpload(file) {
      // 文件格式等预处理
      return true;
    }
  }
}

在模板中，我们可以通过一个进度条组件，如来直观展示上传进度。

<el-progress :percentage="uploadProgress"></el-progress>

接下来是文件下载进度显示。这相对复杂一些，我们可以借助XMLHttpRequest对象来实现。创建一个自定义的下载函数，在函数内部创建XMLHttpRequest实例，监听它的progress事件获取下载进度。

downloadFile() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'your-download-url', true);
  xhr.responseType = 'blob';
  xhr.onprogress = (event) => {
    if (event.lengthComputable) {
      const percentComplete = (event.loaded / event.total) * 100;
      this.downloadProgress = percentComplete;
    }
  };
  xhr.onload = () => {
    if (xhr.status === 200) {
      const blob = xhr.response;
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'your-file-name';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    }
  };
  xhr.send();
}

同样，在模板中用组件展示下载进度。通过上述方法，在Vue与Element-plus框架下，能轻松实现文件上传和下载进度的显示，为用户带来流畅的交互体验。