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
	})
}
el-upload是一个用于文件上传的组件,可以用来自定义上传进度条。通过使用http-request属性,可以覆盖默认的上传行为,并实现自定义上传的功能。 由于使用http-request属性会覆盖默认的上传行为,所以on-progress事件也不会生效。为了实现自定义上传进度条的效果,我们可以按照以下步骤进行操作: 1. 在el-upload组件中设置http-request属性为一个自定义上传方法,例如uploadMethod。这个方法会在文件上传时被调用。 2. 在uploadMethod方法中,可以通过发送一个HTTP请求来上传文件。同时,可以在上传过程中获取到上传进度,并将进度信息保存到一个变量中。 3. 在el-progress组件中,通过绑定percentage属性到保存进度信息的变量,实现实时更新上传进度条的效果。 4. 可以通过设置相应的样式来调整进度条的宽度和位置,以符合需求。 通过以上步骤,我们可以实现el-upload自定义上传进度条效果。这样,在文件上传过程中,用户可以清晰地看到上传进度,并且可以根据进度来判断上传是否完成。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [el-upload自定义上传文件显示进度条](https://blog.csdn.net/weixin_43363871/article/details/126769620)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [el-upload使用http-request自定义上传进度条实战](https://blog.csdn.net/leveretz/article/details/127821245)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值