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>

上传方法

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