美文网首页vuevueVue
axios+Vue实现上传文件显示进度功能

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

作者: BlinglingSam | 来源:发表于2020-12-06 22:12 被阅读0次

    前言

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

    效果

    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)
          })
        },
    

    相关文章

      网友评论

        本文标题:axios+Vue实现上传文件显示进度功能

        本文链接:https://www.haomeiwen.com/subject/wdmawktx.html