问题：el-upload手动上传如何正确显示上传状态？

Question

在使用 `el-upload` 实现手动上传时，常见问题是如何在不自动上传的情况下，正确显示上传状态（如上传中、上传成功或失败）。很多开发者在调用 `submit` 方法后发现上传进度未更新或状态未同步，导致用户体验不佳。问题通常出在未正确监听上传事件或未绑定状态到 UI 元素。解决方法包括使用 `before-upload` 控制上传前状态，通过 `on-progress` 更新上传进度，以及在 `on-success` 和 `on-error` 中更新最终状态。同时，确保 `file-list` 正确绑定，以反映文件状态变化，从而实现上传状态的准确显示。

Answer 1

一、el-upload手动上传状态显示问题概述

在使用 el-upload 组件实现手动上传功能时，一个常见的痛点是：如何在不自动上传的情况下，正确显示文件的上传状态（如上传中、成功或失败）。很多开发者在调用 submit 方法后发现上传进度未更新，或者上传状态未能同步到 UI，从而导致用户体验不佳。

1.1 常见现象

• 点击提交按钮后，上传进度条未更新
• 上传成功或失败后，状态未反映在界面上
• 多次上传时，文件列表状态混乱

1.2 问题本质

问题的核心在于 el-upload 的状态更新机制未被正确监听或绑定。开发者往往忽略了对上传事件的监听，或者未正确维护 file-list 的状态。

二、el-upload上传状态更新的关键机制

要实现手动上传并正确显示上传状态，必须理解 el-upload 的几个关键事件和属性：

2.1 关键属性与事件

属性/事件	作用	使用场景
file-list	绑定上传文件列表，用于显示和更新状态	必须双向绑定，才能同步状态
before-upload	上传前触发，可用于设置状态为“上传中”	控制上传前的准备工作
on-progress	上传过程中触发，用于更新进度条	实时显示上传进度
on-success	上传成功时触发，用于更新状态为“成功”	上传完成后的状态更新
on-error	上传失败时触发，用于更新状态为“失败”	错误处理与状态反馈

2.2 状态同步机制流程图

graph TD
            A[用户点击上传按钮] --> B{是否手动上传?}
            B -- 是 --> C[调用submit方法]
            C --> D[触发before-upload]
            D --> E[设置文件状态为"上传中"]
            E --> F[触发on-progress]
            F --> G[更新进度条]
            G --> H{上传是否成功?}
            H -- 成功 --> I[触发on-success]
            H -- 失败 --> J[触发on-error]
            I --> K[更新状态为"成功"]
            J --> L[更新状态为"失败"]
            K --> M[更新file-list状态]
            L --> M

三、实现步骤与代码示例

下面是一个完整的实现示例，展示如何通过 el-upload 实现手动上传，并正确显示上传状态。

3.1 模板部分

<template>
  <el-upload
    ref="upload"
    :action="uploadUrl"
    :auto-upload="false"
    :file-list="fileList"
    :before-upload="handleBeforeUpload"
    :on-progress="handleProgress"
    :on-success="handleSuccess"
    :on-error="handleError"
    >
    <el-button slot="trigger" type="primary">选择文件</el-button>
    <el-button @click="submitUpload">上传文件</el-button>
  </el-upload>
</template>

3.2 脚本部分

<script>
export default {
  data() {
    return {
      uploadUrl: 'https://your-api.com/upload',
      fileList: []
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleBeforeUpload(file) {
      const index = this.fileList.findIndex(f => f.uid === file.uid);
      if (index > -1) {
        this.fileList[index].status = 'uploading';
      }
    },
    handleProgress(event, file, fileList) {
      const index = this.fileList.findIndex(f => f.uid === file.uid);
      if (index > -1) {
        this.fileList[index].percentage = event.percent;
      }
    },
    handleSuccess(response, file, fileList) {
      const index = this.fileList.findIndex(f => f.uid === file.uid);
      if (index > -1) {
        this.fileList[index].status = 'success';
      }
    },
    handleError(err, file, fileList) {
      const index = this.fileList.findIndex(f => f.uid === file.uid);
      if (index > -1) {
        this.fileList[index].status = 'fail';
      }
    }
  }
};
</script>