在使用 Element UI 的 el-upload 组件时，我们可能需要在不同的事件中传递额外的参数，以满足业务需求。本文将详细讲解如何在 on-success、on-error 和 before-upload 事件中传递更多参数，并介绍相关知识点。
基础用法
我们先来看一下一个基础的 el-upload 组件配置：
<el-uploadclass="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 事件传递更多参数
<el-uploadclass="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 事件中：
<el-uploadclass="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 事件用于在文件上传之前进行处理，同样可以传递更多的参数：
<el-uploadclass="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 事件中传递额外参数：
<template><el-uploadclass="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 事件中传递额外参数，并提供了完整的示例代码。希望这些内容能对你有所帮助，如果有任何问题或需要进一步的帮助，请随时留言！
