elemnetui 自定义上传文件（带进度条）

最新推荐文章于 2023-07-21 11:48:43 发布

二刺螈哪有二刺螈

最新推荐文章于 2023-07-21 11:48:43 发布

阅读量1.4k

点赞数

文章标签：前端开发 el-upload 异步上传进度更新回调函数

本文链接：https://blog.csdn.net/lalalademax/article/details/124381448

版权

<el-upload
  action=""
  :file-list="fileList"
  :http-request="handleChange"
></el-upload>

async handleChange (params) {
  const fileBody = new FormData()
  fileBody.append('file', params.file)
  fileBody.append('token', 'unstructured')
  request({
    method: 'xxxx',
    url: 'xxxxxxx',
    data: fileBody,
    // complete就是处理后的上传进度数值1-100
    onUploadProgress: progressEvent => {
      const complete = parseInt(
        ((progressEvent.loaded / progressEvent.total) * 100) | 0,
        10
      )
      // onProgress()方法需要以上方接收的形参来调用
      // 这个方法有一个参数"percent"，给他进度值 complete 即可
      params.onProgress({ percent: complete })
    }
  }).then((res) => {
    if (res.code === 200) {
      this.fileList.push(file)
    }
  })
},