el-upload中的on-success不执行

当上传成功时，`el-upload` 组件的 `on-success` 事件会被触发。如果你发现这个事件没有被执行，可以检查以下几个方面：

1. 是否设置了 action 属性

在 `el-upload` 组件中，`action` 属性指定了文件上传的地址。如果没有设置 `action` 属性，文件上传肯定会失败，也就无法触发 `on-success` 事件。

2. 是否服务器响应了正确的数据格式

当文件上传成功后，服务器需要返回一个 JSON 数据格式的响应，而且必须包含 `code` 和 `data` 两个字段。如果服务器返回的数据格式不正确，`on-success` 事件也无法正确执行。

3. 是否在代码中正确绑定了 `on-success` 事件

在 `el-upload` 组件中，`on-success` 事件是通过 `@success` 或 `v-on:success` 来绑定的。如果你没有正确绑定该事件，那么它就不会被执行。

如果以上三个方面都没有问题，建议在控制台中打印出服务器返回的数据，看看是否符合预期。如果还是无法解决问题，可以提供更多的代码和详细的错误信息，方便定位问题所在。

相关问题

el-upload中的on-success

### 回答1：
el-upload中的on-success是一个回调函数，用于在文件上传成功后执行特定的操作。当上传成功时，该函数将被调用，并且可以在其中执行一些操作，例如更新上传文件的状态或显示上传成功的消息。该函数的参数包括上传成功的文件信息和响应数据。

### 回答2：
el-upload是在Vue框架中使用的一个文件上传组件，它具有许多可触发不同事件的函数，其中之一是on-success。

on-success是el-upload中的一个回调函数，当文件上传成功后触发它。这个函数的主要作用是当上传请求成功时，在向服务器发送的请求中获取服务器响应的数据，并完成相应的操作。

例如，当用户上传头像成功后，on-success函数可以将接收到的服务器响应数据和用户信息绑定，实现显示用户头像信息的功能。此外，这个函数还可以用来在页面上显示上传成功的信息，比如提示用户上传成功了。

on-success函数可以定义到el-upload组件中，也可以以外部函数的形式定义，这取决于实际需求和开发者个人喜好。由于on-success可以返回响应的数据，可以使用这个功能来获取关于所上传文件的具体信息，比如文件名、文件类型和文件大小等。

总之，on-success是el-upload中非常重要的一个函数，它可以帮助开发者实现文件上传后的相关逻辑，为开发提供简洁明了的编程接口。在实际开发中，它可以灵活运用，为开发者提供更高效的解决方案。

### 回答3：
el-upload 是 Element-UI 库中的一个组件，主要用于文件上传功能。在使用 el-upload 时，我们可以通过设置 on-success 方法来监听上传成功后的事件。on-success 方法传递了两个参数，分别是 response 和 file，代表上传成功后服务器返回的原始数据以及上传的文件对象。

使用 on-success 方法可以对上传成功后的操作进行个性化定制。例如，在上传成功后，我们可以使用 response 中的数据来更新页面上的数据，或者根据上传成功的文件名在页面上展示对应的图片信息。此外，on-success 方法还可以在上传成功后通过 Message 组件弹出提示信息，提示用户上传成功。

下面是一个使用 on-success 方法的示例：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
  export default {
    methods: {
      beforeUpload(file) {
        // 文件大小限制
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error("上传文件大小不能超过 2MB!");
        }
        return isLt2M;
      },
      handleSuccess(response, file) {
        // 文件上传成功后的操作
        this.$message.success(`文件 ${file.name} 上传成功`);
        console.log(response);
      },
    },
  };
</script>

以上是对 el-upload 中的 on-success 的简单介绍，希望对你有所帮助。

el-upload在on-success中带参数

在ElementUI的upload组件的on-success钩子中，只能传递response、file和fileList这三个参数。如果想要传递更多的参数，可以通过使用匿名函数来实现。在匿名函数中，可以调用自定义的函数，并将额外的参数作为参数传递给该函数。例如，在el-upload的on-success属性中，可以使用匿名函数来调用imgHandleSuccess函数，并将response和scope.row作为参数传递给该函数。具体代码如下所示：

<el-table-column label="图片">
  <template slot-scope="scope">
    <el-upload :action="imgURL" :on-success="function(response) { imgHandleSuccess(response, scope.row) }">
      <el-button size="small" type="primary">上传图片</el-button>
    </el-upload>
  </template>
</el-table-column>

在这个例子中，imgHandleSuccess函数会接收两个参数，response和scope.row。这样就可以在on-success中传递额外的参数了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [Vue - el-upload 组件在 on-success 文件上传成功的钩子中传递更多参数](https://blog.csdn.net/Jie_1997/article/details/121833421)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [el-upload组件如何在on-success文件上传成功的钩子中传递更多参数](https://blog.csdn.net/louxinuo/article/details/120247565)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]