在 `el-upload` 的事件中传递更多参数的方法

2024-06-27 21:14:02 浏览数 (1)

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

基础用法

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

代码语言：js复制
<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>

传递更多参数的方法

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

on-success 事件传递更多参数
代码语言：js复制
<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>

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

on-error 事件传递更多参数

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

代码语言：js复制
<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>
before-upload 事件传递更多参数

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

代码语言：js复制
<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>

完整示例

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

代码语言：js复制
<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>

相关知识点

el-upload 组件的属性
  • action: 上传的地址，必选参数。
  • headers: 设置上传的请求头部。
  • limit: 限制上传文件的数量。
  • before-upload: 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
  • on-success: 文件上传成功时的钩子，参数为上传成功的响应、上传的文件、文件列表。
  • on-error: 文件上传失败时的钩子，参数为错误信息、上传的文件、文件列表。
内联函数

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

总结

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

我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！

腾讯技术创作特训营S7

0 人点赞