解决 element-ui Upload 上传组件，上传多个文件时 on-success 只触发了一次

原创已于 2023-03-20 09:46:16 修改 · 6.2k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #upload

于 2023-03-17 15:30:14 首次发布

在使用Vue的el-upload组件进行多图上传时，若在on-success回调中直接对file-list赋值，会导致只有第一张图片成功上传。原因是每次成功回调都会更新file-list，中断后续文件的处理。解决方法是检查所有文件上传成功后再统一更新file-list。

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

前言

项目中使用 upload 组件，设置多选同时上传多张图片时，如果在 on-success 里面给 file-list 进行了赋值，on-success 回调函数只执行了一次，这时页面只有一张图片上传成功。

一、代码

<template>
  <el-upload
    class="upload-demo"
    :action="action"
    multiple
    :limit="9"
    :file-list="fileList"
    :on-success="uploadSuccess"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>
<script>
export default {
  name: 'UploadFile',
  data () {
    return {}
  },
  props: {
    action: {
      type: String,
      default: '',
      required: true
    },
    fileList: {
      type: Array
    }
  },
  methods: {
    uploadSuccess (res, file, fileList) {
      console.log("res: ", res)
      console.log("file: ", file)
      console.log("fileList: ", fileList)

      this.fileList.push({
        name: res.Result.fileName,
        url: res.Result.imgUrl
      })
    },
    handleRemove (file, fileList) {},
    handlePreview (file) {},
  }
}
</script>

点击上传按钮，选中多张图片，发现只上传成功了一张，并且 on-success 函数只调用了一次。控制台打印如下：

查看 fileList 数据，发现只有一条数据 status 状态为 success，通过查看 network 可以看到两条上传接口请求都成功并返回了数据。

二、原因

在 on-success 回调函数中，只要有一条数据成功返回后，给 file-list 赋值后面就不会执行了。

三、解决方法

在 on-success 回调函数中，等所有上传请求完成以后在给 file-list 赋值。

    uploadSuccess(res, file, fileList) {
      console.log('res: ', res)
      console.log('file: ', file)
      console.log('fileList: ', fileList)

      if (fileList.every(item => item.status == 'success')) {
        fileList.map(item => {
          /** 这时只需要push进带有response的数据就好 */
          if(item.response) {
            this.fileList.push({
              name: item.response.Result.fileName,
              url: item.response.Result.imgUrl
            })
          }
        })
      }
    }