Vue框架+Element-ui(el-upload组件)使用http-request方法上传文件并显示文件上传进度_vue el-upload上传文件 ,http-request显示进度条

页面代码

		</el-form>
          <el-form-item>
            <form id="upload" enctype="multipart/form-data" method="post">
              <el-upload
                ref="upload"
                class="upload-demo"
                action="#"
                :http-request="UploadImage"
                :on-change="fileChange"
                :before-upload="beforeUpload"
              >
                <!--                :before-upload="beforeUpload"-->
                <el-button size="small" type="primary" class="el-icon-upload">&nbsp;&nbsp;数据上传</el-button>
                <!--                <div-->
                <!--                  slot="tip"-->
                <!--                  class="el-upload__tip"-->
                <!--                >只能上传db文件，且不超过一个</div>-->
              </el-upload>
            </form>
          </el-form-item>
          <!--          <el-progress v-if="progressFlag" />-->
          <el-form-item label="当前文件上传进度">
            <el-progress style="width: 200px;margin-top: 8px" :text-inside="true" :stroke-width="20" :percentage="progressPercent" />
          </el-form-item>
        </el-form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

script部分

引入axios
import axios from 'axios'
1
2

methods代码片段

UploadImage(param) {
      if (this.filterForm.documentType === '') {
        this.$message({
          message: '请选择档案类型后并重新上传',
          type: 'warning'
        })
        return
      } else if (this.filterForm.regTargetArea === '') {
        this.$message({
          message: '请选择区县后并重新上传',
          type: 'warning'
        })
        return
      } else {
        // 上传新文件时，将进度条值置为零
        this.progressPercent = 0
        this.progressFlag = true
        const formdata = new FormData()
        formdata.append('documentType', this.filterForm.documentType)
        formdata.append('upload', param.file)
        axios({
          url: 'url?token=' + this.$store.getters.token,
          method: 'post',
          data: formdata,
          headers: { 'Content-Type': 'multipart/form-data' },
          onUploadProgress: progressEvent => {
            // progressEvent.loaded:已上传文件大小
            // progressEvent.total:被上传文件的总大小
            this.progressPercent = (progressEvent.loaded / progressEvent.total * 100)
            console.info(progressEvent.loaded)
            console.info(progressEvent.total)
          }
        }).then(response => {
          if (response.data.rel) {
            this.$message({
              message: '文件上传成功',
              type: 'success'
            })
            // if (this.progressPercent === 100) {
            //   this.progressFlag = false
            //   this.progressPercent = 0
            // }
            this.logData.upUploadStatus = 1 // 是否上传成功 1 成功 0失败
          } else {
            this.logData.upUploadStatus = 0
          }
          this.logData.upRegion = this.filterForm.regTargetArea // areacode
          this.logData.upFileUrl = response.data.filePath // 上传文件存储路径
          this.logData.upQueryType = this.filterForm.documentType // 档案类型id
          this.logData.upUploadFileSize = response.data.fileSize // 文件大小
          this.logData.upUploadFileName = response.data.fileName // 文件名
          // 文件上传成功后添加日志
          addUpload(this.logData).then(item => {
            console.log('新增文件上传统计日志成功')
          }).catch(res => {
            console.log('新增文件上传统计日志失败')
          })
          param.onSuccess() // 上传成功的文件会显示绿色的对勾
        }).catch(response => {
          this.$message({
            message: '文件上传失败',
            type: 'warning'
          })
        }).then(error => {
          console.log(error)
        })
      }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

axios请求后台时，如有鉴权机制记得带上token

文件上传前做文件类型检查

    beforeUpload(file) {
      console.log(file)
      const testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension = testmsg === 'db'
      // const isLt2M = file.size / 1024 / 1024 < 10
      if (!extension) {
        this.$message({
          message: '上传文件只能是db格式!',
          type: 'warning'
        })
      }
      // if(!isLt2M) {
      //     this.$message({
      //         message: '上传文件大小不能超过 10MB!',
      //         type: 'warning'
      //     });
      // }
      // return extension || extension2 && isLt2M
      return extension
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

附上效果图(进度条是实时动态的)