element el-upload组件 before-upload 回调自定义传参

before-upload的回调函数默认是只有一个file本身作为参数的,传了其他自定义参数也不会获取到,甚至会引起错误。那么如果一个页面使用了多个el-upload组件,而before-upload的逻辑大差不差,但是需要额外传几个参数作为标识以区分是哪一个el-upload组件。这时可以使用箭头函数处理一下回调函数。如下:

    :before-upload="(file) =>beforeUpload(file,'uploadAvatar',2)"
    :before-upload="(file) =>beforeUpload(file,'uploadBg',15)"

    beforeUpload(file, type, size) {
      console.log(file)
      console.log(type) // uploadAvatar、uploadBg
      console.log(size) // 2、15
    },

`antd` 的 `Upload` 组件提供了 `beforeUpload` 钩子函数,这个函数的返回值决定了是否允许文件上传。如果你返回一个 `Promise`,那么 `Upload` 组件会等待该 `Promise` 的解决结果。如果 `Promise` 被解决为 `true`,则允许上传;如果被解决为 `false`,则不允许上传。 如果你发现返回 `Promise` 后多文件上传变成了单个文件上传,可能是因为 `Promise` 的逻辑处理不当导致的。具体来说,如果在 `Promise` 的回调函数中没有正确地处理多个文件的上传逻辑,或者 `Promise` 被错误地设计为只处理单个文件,那么就可能只上传了一个文件。 解决这个问题的关键在于确保 `beforeUpload` 返回的 `Promise` 能够正确处理所有待上传的文件。具体操作如下: 1. 确保 `beforeUpload` 的 `Promise` 逻辑能够处理传入的所有文件。 2. 在 `Promise` 解决的回调函数中,确保每个文件都被正确处理。 3. 如果需要对文件上传进行额外的控制或验证,确保这些逻辑不会阻碍其他文件的上传。 以下是一个简单的示例代码,展示了如何在 `beforeUpload` 中返回 `Promise` 并处理多个文件: ```javascript const uploadProps = { beforeUpload: (file) => { // 创建一个 Promise 对象 return new Promise((resolve, reject) => { // 假设这里是进行一些异步验证逻辑 // 例如验证文件大小,类型等 // 以下是验证文件大小的示例 const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { // 如果文件大于2MB,则拒绝上传,并显示错误信息 reject(new Error('文件大小不能超过2MB')); } else { // 如果通过了验证,则允许上传 resolve(); } }); }, // 其他属性... }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值