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());
          }
        });