element之upload上传组件

实现上传的两种方式：

1、自定义上传

<el-upload
                class="upload-demo"
                :limit="1"
                action=""
                accept=".mp4,.flv"
                ref="uploadFile"
                :auto-upload="false"
                :show-file-list="true"
                :file-list="fileVideoList"
                :before-upload="beforeAvatarUploadVideo"
                :http-request="httpRequestVideo"
                :on-change="handleChangeFile"
                :on-exceed="handleExceed"
                :on-remove="handleRemove"
                :data="fileDataCheck"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>

js部分

 httpRequestVideo(param) {
      // 上传视频
      const fileObj = param.file; // 相当于input里取得的files
      const fmData = new FormData();
      fmData.append("file", fileObj);
      // 添加其他参数
      if (typeof this.fileDataCheck === "object" && this.fileDataCheck) {
        Object.keys(this.fileDataCheck).forEach((k) => {
          fmData.append(k, this.fileDataCheck[k]);
        });
      }
      this.videoLoading = true;
      uploadVedio(fmData)//上传文件的接口
        .then((res) => {
        })
        .catch((res) => {})
    },

需求:
1.本来是点击对话框实现上传视频的功能，但是现在就是在对话框里面，点击上传，在上传视频的过程，我关闭对话框，需要实现就是关闭对话框之后也会取消上传。

经查阅：可以通过abort()实现取消上传
实现方式：this.$refs.“upload组件的ref”.abort()

通过调试，发现使用abort()方法没有效果，我猜测可能是上传的方法有关系，所以换成自动上传。

tips:
1.使用自定义上传方式后，on-success就不会触发了，需要自己手动触发：在httpRequestVideo(file)里面触发file.onSuccess(response)

2、自动上传

:headers自定义请求头，携带cookie参数

<el-upload
                class="upload-demo"
                :limit="1"
                :action="baseUrl + '/vods/uploadVedio'"
                accept=".mp4,.flv"
                :headers="myHeaders"//设置请求头
                ref="uploadFile"
                :auto-upload="false"
                :show-file-list="true"
                :file-list="fileVideoList"
                :before-upload="beforeAvatarUploadVideo"
                :on-success="handleSuccess"
                :on-error="handleError"
                :on-change="handleChangeFile"
                :on-exceed="handleExceed"
                :on-remove="handleRemove"
                :data="fileDataCheck"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>

data(){
	return{
	baseUrl: process.env.VUE_APP_BASE_URL,
	myHeaders: {
        Authorization: getToken(),
      },
}
}

在我关闭对话框的时间函数@close里面做取消上传处理

close(){
	this.$refs.uploadFile.abort()
}

tips
1.前端自动上传到后台之后，前端需要将后端返回的视频地址进行存储，一开始是想 在on-success里面做处理，但是发现不是那种效果，在on-change里面做处理最好

 handleChangeFile(file, fileVideoList) {
      if (fileVideoList.length > 0) {
        const name = fileVideoList[0].name;
        const type = name.substr(name.lastIndexOf(".") + 1, 3);
        const type1 = type.trim().toLowerCase();//我做的是展示上传的文件列表，但是发现上传错误格式的文件后，他也会展示错误格式的文件名称，所以做一下处理
        if (type1 === "mp4" || type1 === "flv") {
          this.fileVideoList = [fileVideoList[fileVideoList.length - 1]]; // 这一步，是展示最后一次选择的csv文件
        } else {
          this.fileVideoList = [];
        }
      }
      if (file.status == "success") {
        // this.temp.playUrl = URL.createObjectURL(file.raw);
        this.temp.playUrl = file.response.data.url;
        this.temp.fileId = file.response.data.fileId;
      }
      this.$refs.uploadFile.submit();
    },

// 上传视频成功的回调
    handleSuccess(res, file, fileList) {
      if (res.code == 200) {
        this.$notify({
          type: "success",
          message: "视频上传成功",
        });
      } else {
        this.$notify({
          type: "error",
          message: "上传失败，请重新上传",
        });
      }
    },
    // 上传视频失败的回调
    handleError(file) {
      this.$refs.uploadFile.clearFiles();
      this.$notify({
        type: "error",
        message: "上传失败，请重新上传",
      });
    },