在使用 Element UI 的 el-upload 组件时，我们可能需要在不同的事件中传递额外的参数，以满足业务需求。本文将详细讲解如何在 on-success、on-error 和 before-upload 事件中传递更多参数，并介绍相关知识点。

基础用法

我们先来看一下一个基础的 el-upload 组件配置：

<el-upload
  class="upload-demo"
  ref="upload"
  :limit="1"
  :before-upload="handleUploadBeforeUpload"
  :auto-upload="true"
  :headers="headers"
  :show-file-list="false"
  :on-success="handleUploadSuccess"
  :on-error="handleUploadError"
  :action="uploadPdf">
  <el-button size="mini" type="primary">上传</el-button>
</el-upload>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
传递更多参数的方法

如果我们想要在这些事件中传递更多的参数，可以通过内联函数的方式实现。以下是详细步骤和示例。

on-success 事件传递更多参数
<el-upload
  class="upload-demo"
  ref="upload"
  :limit="1"
  :before-upload="handleUploadBeforeUpload"
  :auto-upload="true"
  :headers="headers"
  :show-file-list="false"
  :on-success="(response, file, fileList) => {
    return handleUploadSuccess(response, file, fileList, scope.row)
  }"
  :on-error="handleUploadError"
  :action="uploadPdf">
  <el-button size="mini" type="primary">上传</el-button>
</el-upload>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

在这个例子中，我们通过箭头函数将额外的参数 scope.row 传递给 handleUploadSuccess 函数。

on-error 事件传递更多参数

同样的方法也可以应用到 on-error 事件中：

<el-upload
  class="upload-demo"
  ref="upload"
  :limit="1"
  :before-upload="handleUploadBeforeUpload"
  :auto-upload="true"
  :headers="headers"
  :show-file-list="false"
  :on-success="(response, file, fileList) => {
    return handleUploadSuccess(response, file, fileList, scope.row)
  }"
  :on-error="(err, file, fileList) => {
    return handleUploadError(err, file, fileList, scope.row)
  }"
  :action="uploadPdf">
  <el-button size="mini" type="primary">上传</el-button>
</el-upload>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
before-upload 事件传递更多参数

before-upload 事件用于在文件上传之前进行处理，同样可以传递更多的参数：

<el-upload
  class="upload-demo"
  ref="upload"
  :limit="1"
  :before-upload="(file) => {
    return handleUploadBeforeUpload(file, scope.row)
  }"
  :auto-upload="true"
  :headers="headers"
  :show-file-list="false"
  :on-success="(response, file, fileList) => {
    return handleUploadSuccess(response, file, fileList, scope.row)
  }"
  :on-error="(err, file, fileList) => {
    return handleUploadError(err, file, fileList, scope.row)
  }"
  :action="uploadPdf">
  <el-button size="mini" type="primary">上传</el-button>
</el-upload>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
完整示例

以下是一个完整的示例，展示了如何在 before-upload、on-success 和 on-error 事件中传递额外参数：

<template>
  <el-upload
    class="upload-demo"
    ref="upload"
    :limit="1"
    :before-upload="(file) => {
      return handleUploadBeforeUpload(file, scope.row)
    }"
    :auto-upload="true"
    :headers="headers"
    :show-file-list="false"
    :on-success="(response, file, fileList) => {
      return handleUploadSuccess(response, file, fileList, scope.row)
    }"
    :on-error="(err, file, fileList) => {
      return handleUploadError(err, file, fileList, scope.row)
    }"
    :action="uploadPdf">
    <el-button size="mini" type="primary">上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      headers: {},
      uploadPdf: 'your-upload-url',
      scope: {
        row: {
          // 假设有一些数据
        }
      }
    };
  },
  methods: {
    handleUploadBeforeUpload(file, row) {
      console.log('上传前处理:', file);
      console.log('额外参数 row:', row);
      // 上传前处理逻辑
      return true; // 返回 false 可取消上传
    },
    handleUploadSuccess(response, file, fileList, row) {
      console.log('上传成功:', response);
      console.log('文件:', file);
      console.log('文件列表:', fileList);
      console.log('额外参数 row:', row);
      // 处理上传成功后的逻辑
    },
    handleUploadError(err, file, fileList, row) {
      console.error('上传失败:', err);
      console.log('文件:', file);
      console.log('文件列表:', fileList);
      console.log('额外参数 row:', row);
      // 处理上传失败后的逻辑
    }
  }
};
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
相关知识点
el-upload 组件的属性
  • action: 上传的地址，必选参数。
  • headers: 设置上传的请求头部。
  • limit: 限制上传文件的数量。
  • before-upload: 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
  • on-success: 文件上传成功时的钩子，参数为上传成功的响应、上传的文件、文件列表。
  • on-error: 文件上传失败时的钩子，参数为错误信息、上传的文件、文件列表。
内联函数

内联函数是指在传递函数参数时，直接定义的匿名函数。通过内联函数，可以方便地在回调函数中传递额外的参数。

总结

通过使用内联函数，我们可以在 Element UI 的 el-upload 组件的各种事件中传递更多的参数，以满足复杂的业务需求。本文详细介绍了如何在 before-upload、on-success 和 on-error 事件中传递额外参数，并提供了完整的示例代码。希望这些内容能对你有所帮助，如果有任何问题或需要进一步的帮助，请随时留言！