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

async handleChange (params) {// this.fileList = []this.form.fileSize = params.file.sizeconst fileBody = new FormData()fileBody.append('file', params.file)fileBody.append('moduleType', 'unstructured')f

xiao wei li

1403人浏览 · 2022-04-24 17:12:25

xiao wei li · 2022-04-24 17:12:25 发布

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