Upload组件上传后文件列表不更新怎么办？

Element Plus的Upload组件确实有点坑，我之前也被这个坑过。问题出在直接修改fileList.value不行，得用组件提供的on-success回调或者手动触发change事件。

给你两种解决方法：

方法1（推荐）：直接用组件的on-success回调

const handleSuccess = (response, file, fileList) => {

  // 什么都不用做，组件自己会更新

}

方法2：如果要自己控制，记得用响应式数组方法

const handleUpload = async (file) => {

  const res = await uploadFile(file.raw)

  if (res.success) {

    // 要用concat或者扩展运算符创建新数组

    fileList.value = [

      ...fileList.value,

      {

        name: file.name,

        url: res.data.url

      }

    ]

  }

}

原因是Vue的响应式系统对数组直接push不敏感，得用能触发视图更新的方式。

这问题我之前也踩过坑，Element Plus的Upload组件内部状态管理有点绕。

你直接往fileList.value里push是没用的，因为组件内部还维护了一份自己的状态，你这样改它根本不认。

正确的做法是用组件提供的on-success钩子，或者手动上传时调用组件暴露的方法。看你代码是手动上传模式，给你两个方案。

方案一，用组件的onChange配合手动管理：

const uploadRef = ref();



const handleUpload = async (file) => {

  const res = await uploadFile(file.raw);

  if (res.success) {

    // 关键：更新file对象的状态，不是push新对象

    file.url = res.data.url;

    file.status = 'success';

    // 手动触发组件更新

    uploadRef.value.handleSuccess(res, file, fileList.value);

  }

}

方案二，更简单粗暴，直接重新赋值整个数组触发响应式：

const handleUpload = async (file) => {

  const res = await uploadFile(file.raw);

  if (res.success) {

    fileList.value = [

      ...fileList.value,

      {

        name: file.name,

        url: res.data.url,

        status: 'success'

      }

    ];

  }

}

不过方案二有时候还是不灵，因为组件内部缓存了file对象。

最稳妥的方式是用on-success钩子让组件自己处理，别跟它内部状态较劲：

  ref="uploadRef"

  :file-list="fileList.value"

  :on-success="handleSuccess"

  :auto-upload="true"

>

const handleSuccess = (response, file, list) => {

  file.url = response.data.url;

  fileList.value = list;

}

用钩子函数是最省心的，WordPress里我也老说这句话，别跟框架内部逻辑硬刚，它给你提供啥就用啥。