var uploadInst = layui.upload.render({ elem: '.fairy-sku-img', bindAction: '#id-upload-skus', done: function(res) { console.log(res); } })多次执行后,提交时会多次触发提交事件怎么解决
时间: 2024-02-23 14:01:20 浏览: 18
这个问题的解决方法和上一个问题是类似的,我们需要在每次执行 `layui.upload.render` 方法之前,先销毁之前创建的实例。
具体来说,你可以这样做:
```
// 销毁之前的实例
if (uploadInst) {
uploadInst.config.elem.next().find('iframe').remove();
}
// 创建新的实例
uploadInst = layui.upload.render({
elem: '.fairy-sku-img',
bindAction: '#id-upload-skus',
done: function(res) {
console.log(res);
}
});
```
这样,在每次上传文件之前,都会先销毁之前的实例,保证每次只有一个实例在监听上传事件,避免多次触发提交事件的问题。注意,这里的 `elem` 属性和上一个问题中的不同,需要根据实际情况进行修改。
相关问题
var uploadInst = layui.upload.render({ elem: '#test', url: '/upload/', done: function(res) { console.log(res); } })多次执行后,提交时会多次触发提交事件怎么解决
这个问题的解决方案是在每次执行 `layui.upload.render` 方法之前,先销毁之前创建的实例。因为每次执行 `layui.upload.render` 方法都会生成一个新的实例 `uploadInst`,并且每个实例都会绑定上传成功的回调函数 `done`,所以当你上传文件时,会触发每个实例的上传事件,导致多次触发提交事件。
你可以在每次执行 `layui.upload.render` 方法之前,先销毁之前的实例。可以使用 `uploadInst.config.elem.next().find('iframe').remove()` 方法来销毁之前的实例。具体来说,你可以这样做:
```
// 销毁之前的实例
if (uploadInst) {
uploadInst.config.elem.next().find('iframe').remove();
}
// 创建新的实例
uploadInst = layui.upload.render({
elem: '#test',
url: '/upload/',
done: function(res) {
console.log(res);
}
});
```
这样,在每次上传文件之前,都会先销毁之前的实例,保证每次只有一个实例在监听上传事件,避免多次触发提交事件的问题。
this.data.upload = upload.render({ elem: '.fairy-sku-img', bindAction: '#id-upload-skus')多次实例化后,全部文件上传成功的回调allDone事件会多次触发
是的,因为 `allDone` 事件回调函数会被每个上传组件都绑定一次,所以在多次实例化上传组件的情况下,当所有上传组件都上传完毕后,`allDone` 事件回调函数会被触发多次,导致回调函数多次执行。
解决这个问题的方法是,只需要在第一次实例化上传组件时绑定 `allDone` 事件回调函数,后续的上传组件实例化时不再绑定 `allDone` 事件回调函数,而是手动调用第一次实例化时绑定的回调函数即可。具体代码如下:
```javascript
var isAllUploadDone = false; // 标志位,记录所有上传是否都上传完毕
// 实例化第一个上传组件,绑定 allDone 事件回调函数
this.data.upload = upload.render({
elem: '.fairy-sku-img',
bindAction: '#id-upload-skus',
allDone: function(res) {
// 所有上传都完成后,将标志位设置为 true
isAllUploadDone = true;
// 处理所有上传完成后的逻辑
handleAllUploadCallback();
}
});
// 实例化后续的上传组件,不再绑定 allDone 事件回调函数
for (var i = 1; i < uploadInstances.length; i++) {
this.data.upload = upload.render({
elem: '.fairy-sku-img',
bindAction: '#id-upload-skus'
});
}
// 所有上传组件都上传完毕后的回调函数
function handleAllUploadCallback() {
// TODO: 处理所有上传组件上传完毕后的逻辑
}
// 在需要手动触发所有上传组件上传完毕后的回调函数时,判断标志位是否为 true
if (isAllUploadDone) {
handleAllUploadCallback();
}
```
这样,在第一次实例化上传组件时绑定了 `allDone` 事件回调函数,在后续的实例化上传组件时不再绑定该事件回调函数,而是手动调用第一次实例化时绑定的回调函数。这样可以避免多次触发回调函数的问题。