最近在我的项目中，应用了elementUI的<el-upload>做上传文件，应用自定义:http-request的时候不显示默认的进度条。
其实这个问题有两种解决方案，一种是在action中间接写上要上传门路的url，而后在on-success中获取返回值的门路（保留到服务器中，会返回url的门路地址）；另一种办法就是自定义进度条，也就是在:http-request后追加进度条
<el-form-item ref="uploadElement" prop="fileUpdate" label="上传文件"> <el-upload class="upload-demo" action="123" :http-request="uploadSectionFile" :before-remove="beforeRemove" :limit="1" :on-exceed="handleExceed" :file-list="fileList" accept=".apk" > <el-button size="small" type="primary">点击上传</el-button> </div> <el-progress style="width: 200px;margin-top: 8px" :text-inside="true" :stroke-width="20" :percentage="progressPercent" /> </el-upload> </el-form-item> data() { return { progressPercent: 0, // 进度条默认为0 } }methods: { /** * 自定义上传图片的办法 */ uploadSectionFile(params) { // 上传新文件时，将进度条值置为零 this.progressPercent = 0 const file = params.file this.ruleForm.packageSize = (file.size / (1024 * 1024)).toFixed(2) + 'M' // 文件大小，转化成M this.forms = new FormData() // 实例化一个formData，用来做文件上传 this.forms.append('file', file) // 将图片独自上传，并返回门路 // 进度条 const uploadProgressEvent = progressEvent => { this.progressPercent = Math.floor((progressEvent.loaded * 100) / progressEvent.total) } uploadFile(this.forms, uploadProgressEvent).then(res => { if (res.code === 200) { this.ruleForm.packageUrl = res.data.packageUrl this.$refs.uploadElement.clearValidate() // 如果上传文件胜利，就把必填校验动静移除 } }).catch(response => { console.log('文件上传失败') }) },}最重要的是这个
const uploadProgressEvent = progressEvent => { this.progressPercent = Math.floor((progressEvent.loaded * 100) / progressEvent.total)} 而后在接口中，将参数传过来
export function uploadFile(obj, onUploadProgress) { return request({ url: '上传的门路', method: 'POST', data: obj, headers: { 'Content-Type': 'multipart/form-data' }, onUploadProgress })}