介绍

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

实现效果

在这里插入图片描述

表单

<el-uploadclass="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 = 0const file = params.filethis.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})
}