带进度条的上传功能

html部分主要包含一个上传按钮和一个展示进度条的小框

<template>
  <div>
    <el-upload
      class="upload-demo"
      style="float: left"
      action
      :before-upload="beforeAvatarUpload"
      :on-change="getFile"
      :auto-upload="false"
      :show-file-list="showFileList"
    >
      <el-button size="mini" :disabled="loading" icon="el-icon-upload2" type="primary">上传</el-button>
    </el-upload>
    <div v-if="loading" class="box">
      <div class="content">
        正在上传:
        {{ fileOriginName }}
        <!-- 被上传的文件名称 -->
      </div>
      <el-progress :text-inside="true" :stroke-width="14" :percentage="uploadPercent"></el-progress>
    </div>
  </div>
</template>
<style lang="less" scoped>
.box {
  position: absolute;
  bottom: 20px;
  right: 20px;
  height: 50px;
  width: 350px;
  border: 1px solid #ccc;
  padding: 20px;
}
.content {
  padding-bottom: 10px;
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

下面是方法部分,

1.封装接口参数,format格式

2.处理请求头,项目中一般要求带token信息等

3.由于要掉要处理进度的方法,不能使用统一封装的接口请求,直接使用axios进行处理
 axios.post(url,params,headers(fuction)).then().catch()
下面是代码演示
 

  methods: {
    getFile(file) {
      //封装接口参数,采用format格式
      var formdata = new FormData()
      formdata.append('files', file.raw)
      this.rowList.fileCode ? formdata.append('fileCode', this.rowList.fileCode) : ''

      this.fileOriginName = file.name
      //处理请求头,接口要求
      const service = axios.create({
        headers: {
          Authorization: 'Bearer ' + localStorage.getItem('accessToken'),
          tenantName: localStorage.getItem('tenantName')
        }
      })
      // this.getAxiosMultiPostConfig方法占据了headers的填充位置,所以提前处理axios的headers部分
      // 可以根据接口需求在service里进行配置请求头内容
      service
        .post(
          '/api1/oss/upload', //(url)
          formdata, //参数(params)
          this.getAxiosMultiPostConfig((val) => {
            this.loading = true
            this.uploadPercent = val //将处理进度百分比赋值给el-process进度条
          }) //处理进度的方法
        )
        .then(() => {
          this.uploadPercent = 100 //处理完毕后手动赋值进度条100%
          this.loading = false
          this.searchList() //查询
        })
        .catch((error) => {
          this.uploadPercent = 0
          this.loading = false
          this.$message.error('接口出错!!!')
          this.searchList()
        })
    },
    //处理进度条的回调函数
    getAxiosMultiPostConfig(callBack) {
      // 上传进度回调
      function onUploadProgress(progressEvent) {
        if (progressEvent.lengthComputable) {
          let val = (progressEvent.loaded / progressEvent.total) * 100
          val = parseInt(val)
          // 这里的进度只能表明文件已经上传到后台，但是后台有没有处理完还不知道
          // 因此不能直接显示为100%，不然用户会误以为已经上传完毕，关掉浏览器的话就可能导致上传失败
          // 等响应回来时，再将进度设为100%
          if (val < 100) callBack(val)
        }
      }
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data',
          tenantName: localStorage.getItem('tenantName')
        },
        onUploadProgress: onUploadProgress
      }
      return config
    }
  }

 效果演示图

 

备注:对于大文件会有进度条显示进度,小文件上传,速度太快不会有进度的显示