upload el-progress VUE3

### 文件上传进度条实现

在 Vue 3 中使用 `el-progress` 组件可以方便地展示文件上传的进度。为了实现这一功能，需要结合 HTML 和 JavaScript 来处理文件选择以及上传过程中的事件监听。

HTML 结构如下所示：

<div>
  <!-- 进度条 -->
  <el-progress :percentage="uploadProgress" status="success"></el-progress>
  
  <!-- 文件输入框 -->
  <input type="file" id="fileInput" @change="onFileChange">
</div>

当用户选择了文件之后，通过监听 change 事件获取到文件对象并启动上传操作，在此期间不断更新 progress 属性以反映实际传输比例[^1]。

对于上传逻辑，则可以在 methods 或 setup 函数内定义相应的方法来进行处理:

import { ref } from 'vue';

export default {
  setup() {
    const uploadProgress = ref(0);
    
    function onFileChange(event){
      let file = event.target.files[0];
      
      // 创建 FormData 对象用于封装待发送的数据
      var formData = new FormData();
      formData.append('file', file);

      // 使用 XMLHttpRequest 发起请求模拟上传行为
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "/api/upload");
      xhr.upload.onprogress = (e) => {
        if(e.lengthComputable){
          // 计算已上传百分比并赋值给组件属性
          uploadProgress.value = Math.round((e.loaded * 100)/ e.total);          
        }
      };
      xhr.send(formData);
    }

    return{
      uploadProgress,
      onFileChange
    }
  },
}

上述代码片段展示了如何利用原生 API (`XMLHttpRequest`) 来监控上传状态，并实时调整 `el-progress` 的 percentage 值从而达到视觉上的反馈效果[^2]。

需要注意的是，这里仅提供了一个简单的示例框架；具体应用时还需要考虑错误处理、取消上传等功能扩展，同时也建议根据实际情况选用更适合项目的 HTTP 客户端库（如 axios），以便更好地管理异步调用和响应数据解析等问题[^3]。