elementUI 中使用upload上传文件时 before-upload 函数中如果有异步调用,则判断不生效

文章讲述了如何在Vue前端上传组件中,通过使用Promise和async/await改进文件上传前的验证逻辑,确保验证失败时不执行上传操作,提高了用户体验和代码效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<el-upload

                                ref="uploadfile"

                                class="upload-demo"

                                :action="uploadUrl"

                                :headers="{ Authorization: token }"

                                :auto-upload="true"

                                :show-file-list="false"

                                :on-progress="handleProgress"

                                :before-upload="handleBeforeUpload"

                                :on-success="uploadSuccess"

                                :on-error="uploadError"

                                :disabled="fileType.length == 0"

                                :multiple="false"

                                accept=".docx,.doc"

                            >

                                <el-button

                                    size="small"

                                    type="empty-button"

                                    :disabled="fileType.length == 0"

                                    >上传</el-button

                                >

</el-upload>

// 上传文件前判断

async handleBeforeUpload (file) {

                    let flag = true;

                    // 判断

                    let url = this.$apiurl.projectManage_projectFile_checkProjectReportDoc();

                    const paramsData = new FormData();

                    paramsData.append('file', file);

                    let checkResult = await this.doAxios.formdataUpload(url, paramsData, true, true, false);

                    if (checkResult.code == 200) {

                        flag = true;

                    } else {

                        this.$message.error(checkResult.message);

                        flag = false;

                    }

               return false;

        },

按照此写法,验证失败时仍然执行了上传,将判断改成如下方向即可:

handleBeforeUpload (file) {

            return new Promise(async (resolve, reject) => {

                    let flag = true;

                    // 判断

                    let url = this.$apiurl.projectManage_projectFile_checkProjectReportDoc();

                    const paramsData = new FormData();

                    paramsData.append('file', file);

                    let checkResult = await this.doAxios.formdataUpload(url, paramsData, true, true, false);

                    if (checkResult.code == 200) {

                        flag = true;

                    } else {

                        this.$message.error(checkResult.message);

                        flag = false;

                    }

                if (flag == true) {

                    resolve();

                } else {

                    reject();

                }

            })

        },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值