axios+Vue实现上传文件显示进度功能

前言

最近项目中有一个上传文件时需要显示上传进度的功能，在文件很大或者网速很慢的情况下，上传过程中需要给出实时的上传进度百分比，来提高用户体验度。

效果

image.png

实现

利用axios的 onUploadProgress方法进行监听，函数会返回一个loaded 和total，通过计算进行实时更新上传进度。

/**
     * @param event 文件
     * getFile 附件上传
    */
    async getFile (event) {
      let formData = new FormData()
      formData.append('sourceKey', this.editedOriginDetail.claimId)
      formData.append('sourceType', 'MOA_CLAIM_ATTACHMENT')
      formData.append('files', event.target.files[0])
      this.visible ? formData.append('eleFlag', 'N') : formData.append('eleFlag', 'Y')
      let token = storage.get('userToken')
      let url = '/bxt/api/sys/attach/upload'
      // 为了更好阅读，使用未封装axios
      axios({
        url,
        method: 'post',
        data: formData,
        headers: {
          'Authorization': `Bearer ${token}`
        },
        //原生获取上传进度的事件
        onUploadProgress: progressEvent => {
          this.showProcess = true
          let process = (progressEvent.loaded / progressEvent.total * 100 | 0)
          this.progress = `上传进度：${process}%`
        }
      }).then(res => {
        this.showProcess = false
        this.$hips.toast('上传成功')
        this.visible ? this.getFileList() : this.getEleFileList()
      }).catch(err => {
        console.log(err)
      })
    },