element :on-change事件调用两次的问题
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
element :on-change事件调用两次的问题
具体应用代码:
<el-upload
ref="configUpload"
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
:on-change="uploadChange"
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
Drop file here or <em>click to upload</em>
</div>
</el-upload>
on-change绑定的事件为uploadChange
,下面是该事件函数:
uploadChange(file, fileList) {
let fileObj = {
file:fileList,
name:this.loadModel.name,
description:this.loadModel.description,
author:this.loadModel.author,
}
this.uploadFiles.push(fileObj);
let _this = this;
let form = new FormData();
for (let i = 0; i < this.uploadFiles.length; i++) {
//上传文件信息以及模型信息
form.append("datafile", this.uploadFiles[i].raw);
}
for(let item of this.uploadFiles){
//上传文件信息以及模型信息
form.append("datafile", item.file[0].raw);
form.append("name", item.name);
form.append("description", item.description);
form.append("author", item.author);
}
//调用后台接口
this.axios.post("/api/coupleDocument", form).then(res => {})
}
问题:
在该事件中,调用一次接口后,会继续调用该事件,导致调用两次接口
原因:
本质原因是调用了两次uploadChange
事件,所以需要对调用事件做限制
措施
在事件函数第一行加上if (file.status !== 'ready') return;
进行筛选,筛选掉成功以及失败回调,如果未调用,则status为ready,否则为success或者error
改正后的代码:
uploadChange(file, fileList) {
//新增筛选代码
if (file.status !== 'ready') return;
let fileObj = {
file:fileList,
name:this.loadModel.name,
description:this.loadModel.description,
author:this.loadModel.author,
}
...
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
6 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)