el-upload使用http-request自定义上传和进度条实战_el-upload的:http-request使用进度条

介绍

项目中发现使用默认的el-upload上传动作发送上传请求的时候不会带上请求头，于是想通过自定义请求也就是http-request来自定义上传。实践证明这条路是通的，不过有个小问题就是原本上传的进度条没了。于是搞一个自定义进度条。

实现效果

表单

<el-upload
  class="upload-demo"
  action=""
  :http-request="uploadMehod"
  :before-remove="beforeRemove"
  :limit="1"
  :file-list="fileList"
  accept=".zip"
>
  <el-button size="small" type="primary">上传到服务器</el-button>
  <el-progress style="width: 200px;margin-top: 8px"  :percentage="progressPercent" />
  </el-upload>
1
2
3
4
5
6
7
8
9
10
11
12

上传方法

data() {
  return {
    progressPercent: 0, // 进度条默认为0
  }
}

methods: {
  /**
  * 自定义上传图片的方法
  */
  uploadMehod(params) {
    // 上传新文件时，将进度条值置为零
    this.progressPercent = 0

    const file = params.file
    this.forms = new FormData() // 实例化一个formData，用来做文件上传
    this.forms.append('file', file)
    // 将图片单独上传，并返回路径
    // 进度条
    const uploadProgressEvent = progressEvent => {
      this.progressPercent = Math.floor((progressEvent.loaded * 100) / progressEvent.total)
    }

	// 调用axios包装后的上传请求方法
    uploadFile(this.forms, uploadProgressEvent).then(res => {
      if (res.code === 200) {
         //TODO 调用成功方法
      }else{
         //TODO 调用失败方法
      }     
    }).catch(response => {
       console.log('文件上传失败')
    })
  },
}




// 然后在接口中，将参数传过去
export function uploadFile(obj, onUploadProgress) {
return request({
	url: '上传的路径',
	method: 'POST',
	data: obj,
	headers: {
	'Content-Type': 'multipart/form-data'
	},
	onUploadProgress
	})
}
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