element ui 中 Upload组件上传视频,视频未全部上传成功给出友好提示并终止操作

本文介绍了一个应用场景,当用户尝试在支持上传多个视频的表单中进行下一步操作时,如果存在视频正在上传,会通过JavaScript监控并显示友好的错误提示,确保用户体验。
摘要由CSDN通过智能技术生成

多视频上传中给出友好提示


应用场景:
支持上传多个视频,有视频在上传中时,不允许下一步操作,给出友好提示


页面代码:

<el-form-item label="上传视频">
                    <el-upload
                      ref="uploadvideoList"
                      :action="uploadUrl"
                      :data="{}"
                      :limit="3"
                      accept=".mp4"
                      :on-exceed="handleExceed"
                      class="attachment_uploading"
                      :file-list="item.videoList"
                      :on-success="
                        (file, fileList) => handleSuccess(file, fileList, index)
                      "
                      :on-remove="
                        (file, fileList) => handleRemove(file, fileList, index)
                      "
                    >
                      <el-button size="small" icon="el-icon-upload2"
                        >点击上传</el-button
                      >
                      <div slot="tip" class="el-upload__tip">
                        支持扩展名:mp4格式
                      </div>
                    </el-upload>
                  </el-form-item>


javaScript代码:
提交时去遍历上传组件的这个中的uploadFiles中的数据是否包含状态为“uploading”的

 for (let item of this.$refs.uploadvideoList) {
        if (item.uploadFiles.length) {
          for (let itemA of item.uploadFiles) {
            if (itemA.status == "uploading") {
              this.$message.error("有视频在上传中");
              return;
            }
          }
        }
      }

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值