图片上传-总-自定义上传

父组件使用方方

 <el-row>
          <el-col>
                <el-form-item label="上传视频:">
                    <!-- 上传视频组件 :file-list="fileList"这个用作编辑回显用的-->
                    <video-upload1 fileType="serviceAnnex" @successHandleVideo="successHandleVideo" :file-list="editForm.videoFileIds" />
                  </el-form-item>
            </el-col>
   </el-row>

  //视频上传回调
    successHandleVideo(e) {
      this.editForm.videoFileIds = e.join(",");
    }

<template>
  <div class="video-container">
    <el-upload ref="upload" class="avatar-uploader" :http-request="handleRequset" :show-file-list="false" :action="'#'" :data="uploadFileData(data)" :headers="setHeader(headers)" :before-upload="beforeVideoUpload">
      <div class="video-demo">
        <el-button size="small" type="primary">点击上传视频</el-button>
      </div>
    </el-upload>
    <div class="arrayOrder">
      <div class="video-item" v-for="(item,index) in fileListArr" :key="index">
        <video class="video-src" :src="item.url" controls="controls">
        </video>
        <i slot="trigger" v-if="fileListArr" @click="onRemove(item)" class="video-close el-icon-close"></i>
      </div>
      <el-progress style="margin-left:10px;" v-if="isProgress" type="circle" :percentage='percentageValue'></el-progress>
    </div>

  </div>
</template>
<script>
import {
  uploadFileURL,
  openFileApi,
  uploadFileData,
  setHeader,
  uploadFileApi,
} from "../api/file";
import { resetRouter } from "../plugins/router";
export default {
  name: "LjUpload",
  props: {
    data: {
      default() {
        return {};
      },
    },
    fileType: {
      type: String,
      default: "",
    },
    headers: {
      default() {
        return {};
      },
    },
    fileList: {},
  },
  data() {
    return {
      isProgress: false,
      percentageValue: 0,
      flag: true,
      videoFlag: false,
      dialogImageUrl: "",
      dialogVisible: false,
      fileListArr: [], //用来存放视频
      fileListString: [], //存视频id数组
      uploadFileURL: uploadFileURL,
      uploadFileData: uploadFileData,
      setHeader: setHeader,
      file: null,
    };
  },
  mounted() {
    this.flag = true;
  },
  watch: {
    fileList: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        if (!this.flag) {
          return;
        }
        console.log("new", newValue);
        console.log("数组", this.fileListArr);
        let copynewValue = newValue; //拷贝一份
        console.log("copynewValue", copynewValue);
        if (newValue) {
          this.fileListString = copynewValue.split(","); //转化为数组
          console.log("fileListString", this.fileListString);
          copynewValue.split(",").forEach((item) => {
            this.fileListArr.push({ url: openFileApi + item });
          });
        }
        if (this.fileListArr.length) {
          this.flag = false;
        }
      },
    },
  },
  methods: {
    // 自定义上传
    handleRequset(file) {
      this.percentageValue = 0;
      this.isProgress = true;
      uploadFileApi(
        "serviceAnnex",
        0,
        { file: [file.file] },
        this.progress
      ).then((res) => {
        this.flag = false; //为了不让他触发watch
        console.log("自定义上传视频成功", res);
        // 上传成功后调用uploadSucess

        this.percentageValue = 100;
        setTimeout(() => {
          this.isProgress = false;
        }, 500);
        setTimeout(() => {
          this.uploadSucess(res);
        }, 700);
      });
    },
    // 获取进度条百分之多少
    progress(data) {
      console.log("视频组件data", data);
      let result = parseInt((data.loaded / data.total) * 100);
      this.percentageValue = result <= 84 ? result : 84;
    },

    //uploadSucess文件上传成功后走的函数
    uploadSucess(res) {
      this.flag = false; //为了不让他触发watch
      this.fileListString.push(res.fileIdList[0]);
      console.log("上传fileListString", this.fileListString);
      let temp = [];
      this.fileListString.forEach((item) => {
        temp.push({ url: openFileApi + item, name: "" });
      });
      this.fileListArr = temp;
      console.log("视频格式fileListArr", this.fileListArr);
      this.$emit("successHandleVideo", this.fileListString);
    },

    //限制用户上传格式
    beforeVideoUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension =
        testmsg === "mp4" ||
        testmsg === "ogg" ||
        testmsg === "flv" ||
        testmsg === "avi" ||
        testmsg === "wmv" ||
        testmsg === "rmvb";
      if (!extension) {
        this.$message.error("请上传视频 mp4 | ogg | flv 格式!");
        return false;
      }
      return extension;
    }, //beforeVideoUpload
    onRemove(item) {
      console.log(item);
      this.flag = false; //为了不让他触发watch
      let clearId = item.url;
      this.fileListArr.forEach((item1, index) => {
        if (item1.url == clearId) {
          this.fileListArr.splice(index, 1);
          this.fileListString.splice(index, 1);
        }
      });
      console.log("移除的视频", this.fileListArr);
      this.$emit("successHandleVideo", this.fileListString);
    },
  },
};
</script>

<style scoped  lang="less">
.upload-input {
  display: none;
}

.video-demo {
  display: flex;
  align-items: flex-start;
}
.arrayOrder {
  width: 727px;
  display: flex;
  margin-left: -30px;
  flex-wrap: wrap;
}
.video-item {
  position: relative;
  left: 0;
  .video-src {
    width: 150px;
    height: 100px;
    margin-left: 30px;
  }
  .video-close {
    color: red;
    position: absolute;
    top: -6px;
    width: 20px;
    height: 20px;
    display: inline-block;
    right: -15px;
    z-index: 99999;
  }
}
/deep/ .el-progress-circle {
  width: 100px !important;
  height: 100px !important;
}
</style>