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

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

最后

以上就是心灵美飞机为你收集整理的elemnetui 自定义上传文件（带进度条）的全部内容，希望文章能够帮你解决elemnetui 自定义上传文件（带进度条）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。