element-ui中上传upload组件中的遇到的一些需求和解决方案

1.对于上传的钩子,想要传输自己的数据

需求:需要检测上传的视频列表是否有重复的名字
使用·before-upload·的钩子函数,在上传前去判断,如果存在则返回false

        <el-upload
          :ref="item.key"
          :data="{
            classId,
            videoName: item.name
          }"
          :multiple="false"
          type="text"
          action="http://www..top:8080/class/video"
          :limit="1"
          :before-upload="beforeUpload.bind('null', index)"
          class="upload-demo"
        >
          <i class="el-icon-upload"></i>
          上传视频
        </el-upload>

我需要在上传视频文件前检测它是否输入了视频文件名称,但是如果直接绑定函数,就会不知道这个视频文件是哪个对应的文件名称。
所以需要传入v-for绑定的index,这样就可以准确地知道这个视频名称是否有输入。
视频名称是和input的v-model双向绑定的,所以是可以直接判断data上的值是否存在。

拓展

我们在使用before-upload的时候,输出第一个参数file是有一个上传ID的,我们可以将这个id作为识别这个文件的id值

所以就引出一个问题,可不可以同时获取index和官方返回给我们的参数

可以的

上代码

          <el-upload
            :ref="item.key"
            :data="{
              classId,
              videoName: item.name
            }"
            :multiple="false"
            type="text"
            action="http://www.gdutrex.top:8080/class/video"
            :limit="1"
            :before-upload="beforeUpload(index)"
            class="upload-demo"
            :auto-upload="false"
          >
            <i class="el-icon-upload"></i>
            上传视频
          </el-upload>
          /*
			script
          */
          method: {
          beforeUpload(index) {
		      return file => {
		        window.console.log(index, file);
		      };
      }
      

利用闭包和before-upload恰好接受的是一个函数,所以就可以完成同时接受自己的需要的参数和保留官方的参数。

2. upload中绑定data遇到的问题

需求:由于前面使用了file返回的uid,如果不想自己写上传的方法,直接用官方的方法的话,就会遇到一个问题。

就是在·vue·将值传递页面前(即jsp上绑定的:data的上的值前),请求就已经触发了。
这就导致了传给后台的data可能是空的值。(upload上传是异步的)

解决方案:

在这里插入图片描述
我们在上传前等待页面完成,把这个请求触发变成异步。

        return new Promise((res, rej) => {
          if (this.videolist[index].name === "") {
            this.$notify({
              title: "提示",
              message: ("i", { style: "color: teal" }, "请输入视频文件名")
            });
            // 调用rej会阻止上传
            rej();
          } else {
            let newList = this.videolist.slice(0);
            newList[index].uploadId = file.uid;
            let type = file.type.split("/").pop();
            newList[
              index
            ].url = `http://www:8080/video/${this.classId}/${file.uid}.${type}`;
            window.console.log(file, fileList);
            this.$emit("parent-event", newList);
            // 在下一次渲染结束后调用 res 就可以让官方的上传事件变成可控制的异步事件
            this.$nextTick(() => res());
          }
        });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值