Element｜Upload结合Progress实现上传展示进度条

背景 ：

    项目里的 附件上传 题型组件，用户在上传过程中，如果文件较大，上传过程较慢，而又没有一个类似 Loading... 的加载过程的话，会显得干愣愣的，用户体验较差，所以需要添加一个进度条来提示用户上传的进度，下面有两种方式，一种假的，一种真的，伙伴们可根据需求自行选取实现。

    本文章向大家介绍使用 Upload + Progress 实现文件上传进度条实时更新功能，主要包括使用 Upload + Progress 实现文件上传进度条实时更新功能使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

Upload 上传

通过点击或者拖拽上传文件

Progress 进度条

用于展示操作进度，告知用户当前状态和预期。

---

“ 简单 && 假 ” 的 进度条 ：

利用 setInterval 定时器 模拟实现

---

真实加载的进度条 ：

1、使用 Upload + Progress 实现文件上传进度条实时更新功能，需要借助 http-request 属性。

具体使用方法如下：

  // 上传的执行方法  
  onChangeData (file, fileList) {
       // 数据小于0.1M的时候按KB显示
      const size = file.size/1024/1024 > 0.1 ? `(${(file.size/1024/1024).toFixed(1)}M)` : `(${(file.size/1024).toFixed(1)}KB)`
      file.name.indexOf('M')>-1 || file.name.indexOf('KB')>-1 ? file.name : file.name += size
  },
  // 文件上传
  handleRequest (data) {
      let formdata = new FormData()
      formdata.append('file', data.file)
      const config = {
        onUploadProgress: progressEvent => {
          // progressEvent.loaded:已上传文件大小
          // progressEvent.total:被上传文件的总大小
          this.progressPercent = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2))
        }
      }
      this.$axios.post(this.actionURL,formdata,config).then(res => {
        if (res.data.code===1) {}
      })
  },

2、真实进度条，根据文件上传过程中 文件 切片 实现的

相关参数解答：

    xhr.onreadystatechange 是 XMLHttpRequest 对象的一个事件处理程序，

它在请求状态发生变化时触发。XMLHttpRequest 对象用于与服务器进行异步通信，onreadystatechange 事件在接收到服务器响应并且请求状态发生变化时被触发。
    具体来说，xhr.onreadystatechange 事件在以下几种情况下被触发：
        xhr.readyState 的值发生变化时
        xhr.status 的值发生变化时
        xhr.statusText 的值发生变化时
        xhr.response 的值发生变化时
    xhr.readyState 是 XMLHttpRequest 对象的属性，表示请求的状态。

    它有如下几个可能的值：
        0：未初始化。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
        1：打开。open() 方法已被调用，但 send() 方法未被调用。
        2：发送。send() 方法已被调用，并且头部和状态已经可获得。
        3：接收。正在接收服务器的响应数据。
        4：完成。已经接收到全部响应数据，并且可以在客户端使用了。

---

    在 xhr.onreadystatechange 事件处理程序中，我们通常使用条件判断来确定请求的状态是否满足特定条件，以执行相应的操作。例如，在上面的代码中，我们检查 xhr.readyState 是否等于 XMLHttpRequest.DONE，来确定请求是否已完成。

  如果是，则进一步检查 xhr.status 是否为 200 或 201，来确定请求是否成功。
通过使用 xhr.onreadystatechange 事件处理程序，我们可以根据不同的请求状态来执行相应的逻辑，例如更新页面内容、处理错误等。

    xhr.upload 是 XMLHttpRequest 对象的一个属性，而不是事件处理程序。
    xhr.upload 属性是用于处理上传过程中的事件的。

  它是一个包含了与上传相关事件的 XMLHttpRequestUpload 对象。
        在前面提到的代码中，我们使用了 xhr.upload.addEventListener 方法来注册一个 progress 事件监听器。这个事件监听器用于追踪上传的进度。