自定义element UI el-upload组件多文件上传列表显示及进度条问题

最新推荐文章于 2025-07-10 20:48:57 发布

l976425836

最新推荐文章于 2025-07-10 20:48:57 发布

阅读量1w

点赞数 13

CC 4.0 BY-SA版权

文章标签： vue.js html5 javascript elementui

本文链接：https://blog.youkuaiyun.com/l976425836/article/details/120794611

本文档介绍如何在Vue中使用el-upload组件结合axios进行多文件上传，并在上传过程中显示进度条。当使用http-request覆盖默认上传行为以进行Base64转换时，详细展示了如何维护上传状态和进度条显示。通过自定义beforeUpload和onUploadProgress事件，实现了文件上传的进度跟踪和状态更新。同时，给出了详细的代码实现，包括UI布局、逻辑处理和Base64转码函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用el-upload组件上传没有其他要求时进度条显示是没有问题的，但是要对上传的数据进行特殊处理时（如转成base64等），就需要用自定义上传用http-request方法，这时进度条就不显示了或者显示有问题，查了很多资料大多数是针对单文件上传的，多文件上传几乎没有，于是自己决定实现一个

一、 ui

 <el-upload
        ref="uploadMutiple"
        action=""
        :show-file-list="false"
        :multiple="true"
        :before-upload="beforeUpload"
      >
        <el-button size="small" type="primary">选择文件上传</el-button>
      </el-upload>
      <el-table :data="uploadFilesList" style="width: 100%">
        <el-table-column prop="name" :show-overflow-tooltip="true" label="名称">
          <template slot-scope="scope">
            <i style="color:#409EFF" class=" el-icon-s-order" />{{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="是否成功" width="300">
          <template slot-scope="scope">
            <template v-if="scope.row.status==='success'">上传成功！</template>
            <template v-else-if="scope.row.status==='error'">上传失败!</template>
            <el-progress v-else :percentage="scope.row.progress" />
          </template>
        </el-table-column>
        <el-table-column width="120" prop="size" label="大小" />
        <el-table-column prop="name" width="180" :show-overflow-tooltip="true" label="功能">
          <template>
            <el-button type="primary" size="mini">删除</el-button>
            <el-button type="primary" size="mini">下载</el-button>
          </template>
        </el-table-column>
      </el-table>

二、逻辑

 methods: {
    beforeUpload(file) {
      const fileList = {}
      for (const key in file) {
        fileList[key] = file[key]
      }
      // status:uploading、success、error 文件上传状态
      // progress 文件上传进度
      this.uploadFilesList.push({ ...fileList, progress: 0, status: 'uploading' })
      this.httpRequest(file, parms => {
        this.showProgress(fileList, parms)
      })
      // 阻止 el-upload的默认上传
      return false
    },
    showProgress(file, parms) {
      const { progress, status } = parms
      const arr = [...this.uploadFilesList].map(items => {
        if (items.uid === file.uid) {
          items.progress = progress
          items.status = status
        }
        return items
      })
      this.uploadFilesList = [...arr]
    },
 async httpRequest(file, callback) {
      const resBase64 = await getBase64(file)// Base64转码
      const params = { base64: resBase64.split(',')[1] }// 组合适合自己的参数
      let progress = 0
      axios({
        headers: { 'Content-Type': 'application/json;charset=UTF-8' },
        method: 'post',
        url: '******************',
        data: params,
        onUploadProgress: progressEvent => { // 获取文件上传进度 axios自带的
          progress = (progressEvent.loaded / progressEvent.total * 100) | 0
          callback({ progress, status: 'uploading' })
        }
      }).then(() => { // 成功状态
        callback({ progress, status: 'success' })
      }).catch(() => { // 失败状态
        callback({ progress, status: 'error' })
      })
    }
}

三、base64转码

const getBase64 = file => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    let fileResult = ''
    reader.readAsDataURL(file)
    // 开始转
    reader.onload = () => { fileResult = reader.result }
    // 转 失败
    reader.onerror = error => { reject(error) }
    // 转 结束  咱就 resolve 出去
    reader.onloadend = () => { resolve(fileResult) }
  })
}