cnhis-design-vue 2.1.78 → 2.1.80

package/packages/upload/chunk-upload/vod-chunk-upload.vue

@@ -1,749 +1,749 @@
-<template>
-  <div class="upload">
-    <div v-if="!isDetail" class="chunk-uploader-btn" :class="{ 'disable-upload': isDisabled }" v-show="isShowBtn" @click="handleBtnOnClick">
-      <div class="chunk-btn-content">
-        <div class="c-uploader-btn">
-          <template v-if="source == 'guage'">
-            <img :src="require('@/assets/img/video.png')" alt="" class="guage-img" />
-            <div class="uploader-text">
-              <p>点击上传</p>
-              <span class="guage-text">上传视频（不超过50M)</span>
-            </div>
-          </template>
-          <template v-else>
-            <!-- <a-icon class="uploader-icon" type="camera" /> -->
-            <img :src="require('@/assets/img/video.png')" alt="" class="guage-img" />
-            <div class="uploader-text">
-              <p>上传视频</p>
-              <!-- <span v-if="formData.allow_format"> 支持扩展名：{{ formData.allow_format }} </span> -->
-            </div>
-          </template>
-        </div>
-      </div>
-    </div>
-
-    <template>
-      <draggable v-model="fileList" animation="150" :disabled="isDisabled" :options="draggableOptions" @update="draggableUpdate" class="drag-content">
-        <div v-for="(item, index) in fileList" :key="index" class="vod-wrap uploader-preview-wrap">
-          <!-- 上传中 -->
-          <slot v-if="item.status === 'uploading'">
-            <div class="vod-def-bg  vod-uploading">
-              <!-- TODO: 封面图补充 -->
-              <!-- <img :src="item.thumbUrl" class="vod-cover-img" /> -->
-              <div class="uploading-mask" :style="{ height: maskHeight(item) }">
-                <span>{{ showPercent(item.percent) }}%</span>
-              </div>
-            </div>
-          </slot>
-          <!-- 上传完成 -->
-          <slot v-else-if="item.status === 'done'">
-            <div class="vod-def-bg vod-done">
-              <img :src="getvideoCover(item)" class="vod-cover-img" />
-              <div class="tooltip-wrap" :class="{ 'is-new': item.isNew }">
-                <img :src="require('@/assets/img/success.png')" alt="" class="upload-img" />
-                上传成功
-              </div>
-              <!-- 播放图标 -->
-              <div class="icon-wrap">
-                <a-icon theme="filled" type="play-circle" class="icon-play theme_filled" @click.prevent.stop="palyerVod(item, index)" />
-                <a-icon type="play-circle" class="icon-play theme_outlined" @click.prevent.stop="palyerVod(item, index)" />
-              </div>
-            </div>
-          </slot>
-          <!-- 上传失败 -->
-          <slot v-else-if="item.status === 'error'">
-            <div class="vod-def-bg vod-error">
-              <!-- @error="coverImgOnError" -->
-              <img :src="item.thumbUrl" class="vod-cover-img" />
-              <div class="tooltip-wrap error-wrap">
-                <span>
-                  {{ item.message ? item.message : '上传失败，继续上传？' }}
-                </span>
-                <a-button size="small" @click.prevent.stop="restartUpload(item)">
-                  确定
-                </a-button>
-              </div>
-            </div>
-          </slot>
-          <div v-if="['done', 'error'].includes(item.status) && !isDisabled && !isDetail" @click.stop="handleDelFileList(index)" class="uploader-preview-delete">
-            <!-- <span class="pre-delete">一</span> -->
-            <a-icon class="pre-delete" type="minus-circle" theme="filled" />
-          </div>
-        </div>
-      </draggable>
-    </template>
-
-    <video-modal v-if="videoVisible" :visible.sync="videoVisible" :playerOptions="playerOptions"></video-modal>
-    <vodUploadModal
-      v-bind="$attrs"
-      :modalTitle="formData.name"
-      v-model="chunkUploadVisible"
-      :max_size="max_size"
-      :maxLength="maxlength"
-      :propsCategoryMap="propsDefaultAccept"
-      :defaultList="fileList"
-      @getSumbitList="getSumbitList"
-    ></vodUploadModal>
-  </div>
-</template>
-
-<script>
-/**
- * 支持的格式
- * MP4、TS、MOV、MXF、MPG、FLV、WMV、AVI、M4V、F4V、MPEG、3GP、ASF、MKV、HLS
- */
-/**
- * simple-uploader 配置文档
- * https://github.com/simple-uploader/Uploader/blob/develop/README_zh-CN.md#%E9%85%8D%E7%BD%AE
- */
-import videoModal from '@/component/player-vod/video-modal';
-import vodUploadModal from './vod-upload-modal';
-import draggable from 'vuedraggable';
-import { Icon } from 'ant-design-vue';
-import utils from '@/utils/utils-map';
-export default {
-  name: 'vodChunkUpload',
-  data() {
-    return {
-      defaultAccept: '.mp4,.ts,.mov,.mxf,.mpg,.flv,.wmv,.avi,.m4v,.f4v,.mpeg,.3gp,.asf,.mkv,.hls',
-      videoVisible: false,
-
-      fileList: [],
-
-      cacheFileObj: {},
-
-      playerOptions: {}, // 播放配置
-
-      vodClient: null, // 华为云SDK实例
-
-      chunkUploadVisible: false,
-
-      uploader: null,
-      autoStart: true,
-      timeOuts: 60000 * 5, // 轮询超时 默认五分钟
-      configList: [],
-
-      draggableOptions: {
-        group: 'upload-com-item',
-        filter: '.uploading-item',
-        delayOnTouchOnly: true, // 开启触摸延时
-        // direction: 'vertical',   //拖动方向
-        delay: 100, // 延时时长
-        touchStartThreshold: 3, // 防止某些手机过于敏感(3~5 效果最好)
-        chosenClass: 'upload-chosen-draing', // 选中之后拖拽项添加的class名(用于选中时候添加样式)
-        dragClass: 'upload-sortable-drag'
-      },
-
-      // default_cover: require("@/assets/img/form/upload/video_default_cover.png"),
-      hover_play: require('@/assets/img/video_play_hover.png')
-    };
-  },
-  inject: {
-    /** baseForm */
-    mainForm: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  props: {
-    formData: {
-      type: Object,
-      default: () => ({})
-    },
-    defList: [Array, String],
-    source: String,
-    limitNum: {
-      default: 1
-    },
-    defFileList: { default: '' },
-    isLock: Boolean,
-    isDetail: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    defaultFileList() {
-      return this.handleDefList();
-    },
-    isShowBtn() {
-      let { max_length } = this.formData?.validate || {};
-      if (this.source == 'guage') {
-        max_length = +this.limitNum;
-      }
-      if (max_length) {
-        return this.fileList.length < max_length;
-      }
-      return true;
-    },
-    maskHeight() {
-      return function(item) {
-        return `${item.percent}%`;
-      };
-    },
-    showPercent() {
-      return function(percent) {
-        let res = percent > 99 ? 99 : percent;
-        return Math.floor(res);
-      };
-    },
-    allow_format() {
-      if (this.source === 'guage') return this.defaultAccept;
-      const { allow_format } = this.formData;
-      try {
-        if (allow_format) {
-          let list = allow_format.split(',');
-          let resList = list.map(v => {
-            if (v.startsWith('.')) {
-              return v;
-            } else {
-              return '.' + v;
-            }
-          });
-          let resStr = resList.join(',');
-          return resStr;
-        } else {
-          return this.defaultAccept;
-        }
-      } catch (error) {
-        console.log(error);
-        return this.defaultAccept;
-      }
-    },
-
-    propsDefaultAccept() {
-      return this.allow_format;
-    },
-
-    defaultValue() {
-      const { formData, mainForm } = this;
-      if (this.source === 'guage') {
-        return this.defFileList;
-      }
-      return mainForm.defaultValue[formData.name] || formData.default_val;
-    },
-
-    isDisabled() {
-      return this.formData.is_edit == 0 || this.isLock;
-    },
-
-    default_cover() {
-      return require('@/assets/img/video_default_cover.png');
-    },
-
-    max_size() {
-      const { max_size } = this.formData?.validate || {};
-      return max_size || '';
-    },
-    maxlength() {
-      return +(this?.formData?.validate?.max_length || 0);
-    }
-  },
-  watch: {},
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {
-    this.handleDefList();
-
-    // 动态回填
-    this.$watch('defaultValue', () => {
-      this.handleDefList();
-    });
-  },
-  beforeUpdate() {},
-  updated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  activated() {},
-  methods: {
-    /** ------------------------------------------------------------------------ */
-
-    /** 获取默认值/ 回填 */
-    handleDefList() {
-      const { formData, mainForm } = this;
-      let defList = [];
-      if (this.source === 'guage') {
-        defList = this.defFileList;
-      } else {
-        defList = mainForm.handleSysParams(mainForm.defaultValue[formData.name] || formData.default_val);
-      }
-      if (!defList) return [];
-      let list = [];
-      if (Array.isArray(defList)) {
-        list = [...defList];
-      }
-
-      if (utils.isJSON(defList)) {
-        list = JSON.parse(defList);
-      }
-      if (Array.isArray(list)) {
-        list.forEach(item => {
-          item.thumbUrl = item.vodCoverUrl || undefined;
-          item.uid = (-Math.random()).toString();
-          item.status = 'done';
-        });
-        this.fileList = list;
-        this.handleGetSubmitList(list);
-        return list;
-      }
-      return [];
-    },
-
-    /** 获取提交的数据 */
-    handleGetSubmitList(list) {
-      if (!Array.isArray(list)) return '';
-      const { formData, mainForm } = this;
-      let resList = [];
-      list.forEach(v => {
-        if (v.status === 'done' && ((v.response && v.response.code == '00000') || v.url)) {
-          const { data = {} } = v.response || {};
-          let vodUrl = v.url || data.videoUrl;
-          let vodCoverUrl = v.vodCoverUrl || data.vodCoverUrl;
-          // if (!vodCoverUrl) {
-          //   vodCoverUrl = this.handleGetCoverUrl(vodUrl);
-          // }
-          resList.push({
-            name: v.name,
-            size: v.size,
-            url: v.url || data.videoUrl,
-            vodCoverUrl: vodCoverUrl
-          });
-        }
-      });
-      // let resVal = resList.length ? JSON.stringify(resList) : "";
-      let resVal = JSON.stringify(resList);
-      if (this.source === 'guage') {
-        this.$emit('vodFileList', resVal);
-        return;
-      }
-      mainForm.baseForm.setFieldsValue({
-        [formData.val_key]: resVal
-      });
-    },
-
-    /**
-     * 拼接封面图
-     */
-    handleGetCoverUrl(vodUrl) {
-      if (typeof vodUrl === 'string') {
-        let strList = vodUrl.split('/');
-        let len = strList.length;
-        strList.splice(len - 1, 1, 'cover/Cover0.jpg');
-        let imgUrl = strList.join('/');
-        return imgUrl;
-      }
-      return '';
-    },
-
-    /**
-     * 封面图图加载报错
-     */
-    coverImgOnError(e) {
-      let oldUrl = e.target.src;
-      let randomKeys = new Date().getTime().toString();
-      e.target.src = oldUrl + `?randomKeys=${randomKeys}`;
-    },
-
-    handleDelFileList(i) {
-      this.fileList.splice(i, 1);
-      this.handleGetSubmitList(this.fileList);
-    },
-
-    /** 预览视频 */
-    palyerVod(data) {
-      let vodUrl, type;
-      if (data.type) {
-        type = data.type;
-      }
-      if (data.url || data.videoUrl) {
-        vodUrl = data.url || data.videoUrl;
-        if (!type) {
-          let strList = vodUrl.split('.');
-          let last = strList[strList.length - 1];
-          type = `video/${last}`;
-        }
-      } else {
-        vodUrl = URL.createObjectURL(data.originFileObj);
-      }
-
-      this.playerOptions = {
-        sources: [
-          {
-            type,
-            src: vodUrl
-          }
-        ]
-      };
-      this.videoVisible = true;
-    },
-
-    handleBtnOnClick() {
-      if (this.isDisabled) {
-        return;
-      }
-      this.chunkUploadVisible = true;
-    },
-
-    getSumbitList(list) {
-      let resList = [];
-      list.forEach(l => {
-        let coverPic = l.videoCoverPic || undefined;
-        resList.push({
-          name: l.videoName || l.name,
-          url: l.videoUrl || l.url,
-          size: l.size,
-          vodCoverUrl: coverPic,
-          // thumbUrl: coverPic,
-          status: 'done',
-          uid: (-Math.random()).toString()
-        });
-      });
-      this.fileList.push(...resList);
-
-      this.handleGetSubmitList(this.fileList);
-    },
-
-    draggableUpdate() {
-      this.handleGetSubmitList(this.fileList);
-    },
-
-    getvideoCover(item) {
-      if (item.thumbUrl) {
-        return item.thumbUrl;
-      }
-      return this.default_cover;
-    }
-  },
-  components: {
-    videoModal,
-    vodUploadModal,
-    draggable,
-    [Icon.name]: Icon
-  }
-};
-</script>
-
-<style lang="less" scoped>
-.upload {
-  display: flex;
-  flex-wrap: wrap;
-  margin-top: 4px;
-
-  /deep/ .ant-upload-picture-card-wrapper {
-    display: inline-flex;
-    width: unset;
-    margin-right: 8px;
-    .ant-upload.ant-upload-select-picture-card {
-      width: 140px;
-      height: 120px;
-      margin: unset;
-      background: #fafafa;
-      border-color: #d5d5d5;
-      .uploader-btn {
-        .uploader-icon {
-          font-size: 30px;
-          color: #000000;
-        }
-        .uploader-text {
-          width: 140px;
-          p {
-            color: #585858;
-            margin-bottom: 4px;
-          }
-          span {
-            color: #b6b6b6;
-            font-size: 12px;
-          }
-          .guage-text {
-            color: #585858;
-            font-size: 14px;
-          }
-        }
-      }
-      &:hover {
-        background: #f3f7ff;
-        border-color: #5585f5;
-        .uploader-btn .uploader-icon,
-        .uploader-btn .uploader-text p,
-        .uploader-btn .uploader-text span {
-          color: #5585f5;
-        }
-      }
-    }
-  }
-}
-.show-list {
-  display: inline-flex;
-  flex-wrap: wrap;
-}
-.vod-wrap {
-  position: relative;
-  display: inline-block;
-  background-color: #fff;
-  width: 140px;
-  height: 120px;
-  margin-right: 8px;
-  margin-bottom: 8px;
-  border: 1px dashed #eeeeee;
-  border-radius: 4px;
-  background-color: #fff;
-  .vod-uploading {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    background-color: #fafafa;
-    .progress-wrap {
-      padding: 3px;
-    }
-    .uploading-msg {
-      color: #333;
-      font-size: 12px;
-      text-align: center;
-    }
-    .uploading-mask {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      min-height: 20%;
-      background: rgba(0, 0, 0, 0.3);
-      color: #fff;
-      text-align: center;
-    }
-  }
-
-  .vod-def-bg {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(50, 50, 51, 0.5);
-    .icon-vod-def {
-      font-size: 40px;
-      opacity: 0.3;
-      transform: scale3d(2, 2, 2);
-      transition: all 0.25s ease-out;
-    }
-    .vod-cover-img {
-      height: 100%;
-      width: 100%;
-      object-fit: cover;
-      border-radius: 4px;
-    }
-    .tooltip-wrap {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      width: 120px;
-      height: 40px;
-      color: #fff;
-      background: #22de4b;
-      border-radius: 4px;
-      .upload-img {
-        display: inline-block;
-        width: 20px;
-        height: 20px;
-        margin-right: 10px;
-      }
-      &.error-wrap {
-        flex-direction: column;
-        width: 158px;
-        height: 72px;
-        background: #e02020;
-        span {
-          height: 20px;
-          line-height: 20px;
-          margin-bottom: 8px;
-        }
-      }
-    }
-    &.vod-done {
-      .tooltip-wrap {
-        opacity: 0;
-        &.is-new {
-          animation: fadeOut 2.5s 1 both;
-          @keyframes fadeOut {
-            0% {
-              opacity: 1;
-            }
-            80% {
-              opacity: 1;
-            }
-            100% {
-              opacity: 0;
-            }
-          }
-        }
-      }
-    }
-    &.vod-done:hover {
-      .icon-wrap {
-        background: rgba(0, 0, 0, 0.2);
-      }
-      .theme_outlined {
-        display: none;
-      }
-      .theme_filled {
-        display: inline-block;
-      }
-    }
-  }
-}
-// .vod-wrap {
-//   &:first-child {
-//     margin-left: 8px;
-//   }
-// }
-
-.uploader-preview-wrap {
-  .uploader-mask {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: column;
-    flex-direction: column;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center;
-    color: #fff;
-    background-color: rgba(50, 50, 51, 0.88);
-
-    .uploading-msg {
-      font-size: 12px;
-    }
-  }
-  .uploader-preview-delete {
-    position: absolute;
-    top: -16px;
-    right: -7px;
-    width: 16px;
-    height: 16px;
-    z-index: 10;
-
-    .pre-delete {
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-      background: #fff;
-      color: #e02020;
-      font-size: 20px;
-      cursor: pointer;
-    }
-  }
-}
-
-.icon-wrap {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.6);
-  color: #fff;
-  font-size: 28px;
-  z-index: 1;
-  .icon-play {
-    position: relative;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    transition: all 0.25s ease-out;
-  }
-  .theme_outlined {
-    display: inline-block;
-  }
-  .theme_filled {
-    display: none;
-  }
-}
-
-.chunk-uploader-btn {
-  display: table;
-  width: 140px;
-  height: 120px;
-  margin-right: 8px;
-  background: #fafafa;
-  text-align: center;
-  vertical-align: top;
-  border: 1px dashed #d5d5d5;
-  border-radius: 4px;
-  transition: border-color 0.3s ease;
-  -webkit-transition: border-color 0.3s ease;
-  cursor: pointer;
-  &.disable-upload {
-    cursor: not-allowed;
-  }
-
-  .chunk-btn-content {
-    display: table-cell;
-    width: 100%;
-    height: 100%;
-    // padding: 8px;
-    text-align: center;
-    vertical-align: middle;
-
-    .c-uploader-btn {
-      line-height: 1.5;
-      img {
-        width: 32px;
-        height: 32px;
-      }
-      .uploader-icon {
-        font-size: 30px;
-        color: #000000;
-      }
-      .uploader-text {
-        width: 140px;
-        p {
-          color: #585858;
-          margin-bottom: 0px;
-        }
-        span {
-          color: #b6b6b6;
-          font-size: 12px;
-        }
-        .guage-text {
-          color: #585858;
-          font-size: 14px;
-        }
-      }
-    }
-  }
-
-  &:hover {
-    background: #f3f7ff;
-    border-color: #5585f5;
-    .guage-img {
-      content: url('../../../src/assets/img/video_hover.png');
-    }
-    .c-uploader-btn .uploader-icon,
-    .c-uploader-btn .uploader-text p,
-    .c-uploader-btn .uploader-text span,
-    .c-uploader-btn .uploader-text .guage-text {
-      color: #5585f5;
-    }
-  }
-}
-</style>
+<template>
+  <div class="upload">
+    <div v-if="!isDetail" class="chunk-uploader-btn" :class="{ 'disable-upload': isDisabled }" v-show="isShowBtn" @click="handleBtnOnClick">
+      <div class="chunk-btn-content">
+        <div class="c-uploader-btn">
+          <template v-if="source == 'guage'">
+            <img :src="require('@/assets/img/video.png')" alt="" class="guage-img" />
+            <div class="uploader-text">
+              <p>点击上传</p>
+              <span class="guage-text">上传视频（不超过50M)</span>
+            </div>
+          </template>
+          <template v-else>
+            <!-- <a-icon class="uploader-icon" type="camera" /> -->
+            <img :src="require('@/assets/img/video.png')" alt="" class="guage-img" />
+            <div class="uploader-text">
+              <p>上传视频</p>
+              <!-- <span v-if="formData.allow_format"> 支持扩展名：{{ formData.allow_format }} </span> -->
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <template>
+      <draggable v-model="fileList" animation="150" :disabled="isDisabled" :options="draggableOptions" @update="draggableUpdate" class="drag-content">
+        <div v-for="(item, index) in fileList" :key="index" class="vod-wrap uploader-preview-wrap">
+          <!-- 上传中 -->
+          <slot v-if="item.status === 'uploading'">
+            <div class="vod-def-bg  vod-uploading">
+              <!-- TODO: 封面图补充 -->
+              <!-- <img :src="item.thumbUrl" class="vod-cover-img" /> -->
+              <div class="uploading-mask" :style="{ height: maskHeight(item) }">
+                <span>{{ showPercent(item.percent) }}%</span>
+              </div>
+            </div>
+          </slot>
+          <!-- 上传完成 -->
+          <slot v-else-if="item.status === 'done'">
+            <div class="vod-def-bg vod-done">
+              <img :src="getvideoCover(item)" class="vod-cover-img" />
+              <div class="tooltip-wrap" :class="{ 'is-new': item.isNew }">
+                <img :src="require('@/assets/img/success.png')" alt="" class="upload-img" />
+                上传成功
+              </div>
+              <!-- 播放图标 -->
+              <div class="icon-wrap">
+                <a-icon theme="filled" type="play-circle" class="icon-play theme_filled" @click.prevent.stop="palyerVod(item, index)" />
+                <a-icon type="play-circle" class="icon-play theme_outlined" @click.prevent.stop="palyerVod(item, index)" />
+              </div>
+            </div>
+          </slot>
+          <!-- 上传失败 -->
+          <slot v-else-if="item.status === 'error'">
+            <div class="vod-def-bg vod-error">
+              <!-- @error="coverImgOnError" -->
+              <img :src="item.thumbUrl" class="vod-cover-img" />
+              <div class="tooltip-wrap error-wrap">
+                <span>
+                  {{ item.message ? item.message : '上传失败，继续上传？' }}
+                </span>
+                <a-button size="small" @click.prevent.stop="restartUpload(item)">
+                  确定
+                </a-button>
+              </div>
+            </div>
+          </slot>
+          <div v-if="['done', 'error'].includes(item.status) && !isDisabled && !isDetail" @click.stop="handleDelFileList(index)" class="uploader-preview-delete">
+            <!-- <span class="pre-delete">一</span> -->
+            <a-icon class="pre-delete" type="minus-circle" theme="filled" />
+          </div>
+        </div>
+      </draggable>
+    </template>
+
+    <video-modal v-if="videoVisible" :visible.sync="videoVisible" :playerOptions="playerOptions"></video-modal>
+    <vodUploadModal
+      v-bind="$attrs"
+      :modalTitle="formData.name"
+      v-model="chunkUploadVisible"
+      :max_size="max_size"
+      :maxLength="maxlength"
+      :propsCategoryMap="propsDefaultAccept"
+      :defaultList="fileList"
+      @getSumbitList="getSumbitList"
+    ></vodUploadModal>
+  </div>
+</template>
+
+<script>
+/**
+ * 支持的格式
+ * MP4、TS、MOV、MXF、MPG、FLV、WMV、AVI、M4V、F4V、MPEG、3GP、ASF、MKV、HLS
+ */
+/**
+ * simple-uploader 配置文档
+ * https://github.com/simple-uploader/Uploader/blob/develop/README_zh-CN.md#%E9%85%8D%E7%BD%AE
+ */
+import videoModal from '@/component/player-vod/video-modal';
+import vodUploadModal from './vod-upload-modal';
+import draggable from 'vuedraggable';
+import { Icon } from 'ant-design-vue';
+import utils from '@/utils/utils-map';
+export default {
+  name: 'vodChunkUpload',
+  data() {
+    return {
+      defaultAccept: '.mp4,.ts,.mov,.mxf,.mpg,.flv,.wmv,.avi,.m4v,.f4v,.mpeg,.3gp,.asf,.mkv,.hls',
+      videoVisible: false,
+
+      fileList: [],
+
+      cacheFileObj: {},
+
+      playerOptions: {}, // 播放配置
+
+      vodClient: null, // 华为云SDK实例
+
+      chunkUploadVisible: false,
+
+      uploader: null,
+      autoStart: true,
+      timeOuts: 60000 * 5, // 轮询超时 默认五分钟
+      configList: [],
+
+      draggableOptions: {
+        group: 'upload-com-item',
+        filter: '.uploading-item',
+        delayOnTouchOnly: true, // 开启触摸延时
+        // direction: 'vertical',   //拖动方向
+        delay: 100, // 延时时长
+        touchStartThreshold: 3, // 防止某些手机过于敏感(3~5 效果最好)
+        chosenClass: 'upload-chosen-draing', // 选中之后拖拽项添加的class名(用于选中时候添加样式)
+        dragClass: 'upload-sortable-drag'
+      },
+
+      // default_cover: require("@/assets/img/form/upload/video_default_cover.png"),
+      hover_play: require('@/assets/img/video_play_hover.png')
+    };
+  },
+  inject: {
+    /** baseForm */
+    mainForm: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  props: {
+    formData: {
+      type: Object,
+      default: () => ({})
+    },
+    defList: [Array, String],
+    source: String,
+    limitNum: {
+      default: 1
+    },
+    defFileList: { default: '' },
+    isLock: Boolean,
+    isDetail: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    defaultFileList() {
+      return this.handleDefList();
+    },
+    isShowBtn() {
+      let { max_length } = this.formData?.validate || {};
+      if (this.source == 'guage') {
+        max_length = +this.limitNum;
+      }
+      if (max_length) {
+        return this.fileList.length < max_length;
+      }
+      return true;
+    },
+    maskHeight() {
+      return function(item) {
+        return `${item.percent}%`;
+      };
+    },
+    showPercent() {
+      return function(percent) {
+        let res = percent > 99 ? 99 : percent;
+        return Math.floor(res);
+      };
+    },
+    allow_format() {
+      if (this.source === 'guage') return this.defaultAccept;
+      const { allow_format } = this.formData;
+      try {
+        if (allow_format) {
+          let list = allow_format.split(',');
+          let resList = list.map(v => {
+            if (v.startsWith('.')) {
+              return v;
+            } else {
+              return '.' + v;
+            }
+          });
+          let resStr = resList.join(',');
+          return resStr;
+        } else {
+          return this.defaultAccept;
+        }
+      } catch (error) {
+        console.log(error);
+        return this.defaultAccept;
+      }
+    },
+
+    propsDefaultAccept() {
+      return this.allow_format;
+    },
+
+    defaultValue() {
+      const { formData, mainForm } = this;
+      if (this.source === 'guage') {
+        return this.defFileList;
+      }
+      return mainForm.defaultValue[formData.name] || formData.default_val;
+    },
+
+    isDisabled() {
+      return this.formData.is_edit == 0 || this.isLock;
+    },
+
+    default_cover() {
+      return require('@/assets/img/video_default_cover.png');
+    },
+
+    max_size() {
+      const { max_size } = this.formData?.validate || {};
+      return max_size || '';
+    },
+    maxlength() {
+      return +(this?.formData?.validate?.max_length || 0);
+    }
+  },
+  watch: {},
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {
+    this.handleDefList();
+
+    // 动态回填
+    this.$watch('defaultValue', () => {
+      this.handleDefList();
+    });
+  },
+  beforeUpdate() {},
+  updated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  activated() {},
+  methods: {
+    /** ------------------------------------------------------------------------ */
+
+    /** 获取默认值/ 回填 */
+    handleDefList() {
+      const { formData, mainForm } = this;
+      let defList = [];
+      if (this.source === 'guage') {
+        defList = this.defFileList;
+      } else {
+        defList = mainForm.handleSysParams(mainForm.defaultValue[formData.name] || formData.default_val);
+      }
+      if (!defList) return [];
+      let list = [];
+      if (Array.isArray(defList)) {
+        list = [...defList];
+      }
+
+      if (utils.isJSON(defList)) {
+        list = JSON.parse(defList);
+      }
+      if (Array.isArray(list)) {
+        list.forEach(item => {
+          item.thumbUrl = item.vodCoverUrl || undefined;
+          item.uid = (-Math.random()).toString();
+          item.status = 'done';
+        });
+        this.fileList = list;
+        this.handleGetSubmitList(list);
+        return list;
+      }
+      return [];
+    },
+
+    /** 获取提交的数据 */
+    handleGetSubmitList(list) {
+      if (!Array.isArray(list)) return '';
+      const { formData, mainForm } = this;
+      let resList = [];
+      list.forEach(v => {
+        if (v.status === 'done' && ((v.response && v.response.code == '00000') || v.url)) {
+          const { data = {} } = v.response || {};
+          let vodUrl = v.url || data.videoUrl;
+          let vodCoverUrl = v.vodCoverUrl || data.vodCoverUrl;
+          // if (!vodCoverUrl) {
+          //   vodCoverUrl = this.handleGetCoverUrl(vodUrl);
+          // }
+          resList.push({
+            name: v.name,
+            size: v.size,
+            url: v.url || data.videoUrl,
+            vodCoverUrl: vodCoverUrl
+          });
+        }
+      });
+      // let resVal = resList.length ? JSON.stringify(resList) : "";
+      let resVal = JSON.stringify(resList);
+      if (this.source === 'guage') {
+        this.$emit('vodFileList', resVal);
+        return;
+      }
+      mainForm.baseForm.setFieldsValue({
+        [formData.val_key]: resVal
+      });
+    },
+
+    /**
+     * 拼接封面图
+     */
+    handleGetCoverUrl(vodUrl) {
+      if (typeof vodUrl === 'string') {
+        let strList = vodUrl.split('/');
+        let len = strList.length;
+        strList.splice(len - 1, 1, 'cover/Cover0.jpg');
+        let imgUrl = strList.join('/');
+        return imgUrl;
+      }
+      return '';
+    },
+
+    /**
+     * 封面图图加载报错
+     */
+    coverImgOnError(e) {
+      let oldUrl = e.target.src;
+      let randomKeys = new Date().getTime().toString();
+      e.target.src = oldUrl + `?randomKeys=${randomKeys}`;
+    },
+
+    handleDelFileList(i) {
+      this.fileList.splice(i, 1);
+      this.handleGetSubmitList(this.fileList);
+    },
+
+    /** 预览视频 */
+    palyerVod(data) {
+      let vodUrl, type;
+      if (data.type) {
+        type = data.type;
+      }
+      if (data.url || data.videoUrl) {
+        vodUrl = data.url || data.videoUrl;
+        if (!type) {
+          let strList = vodUrl.split('.');
+          let last = strList[strList.length - 1];
+          type = `video/${last}`;
+        }
+      } else {
+        vodUrl = URL.createObjectURL(data.originFileObj);
+      }
+
+      this.playerOptions = {
+        sources: [
+          {
+            type,
+            src: vodUrl
+          }
+        ]
+      };
+      this.videoVisible = true;
+    },
+
+    handleBtnOnClick() {
+      if (this.isDisabled) {
+        return;
+      }
+      this.chunkUploadVisible = true;
+    },
+
+    getSumbitList(list) {
+      let resList = [];
+      list.forEach(l => {
+        let coverPic = l.videoCoverPic || undefined;
+        resList.push({
+          name: l.videoName || l.name,
+          url: l.videoUrl || l.url,
+          size: l.size,
+          vodCoverUrl: coverPic,
+          // thumbUrl: coverPic,
+          status: 'done',
+          uid: (-Math.random()).toString()
+        });
+      });
+      this.fileList.push(...resList);
+
+      this.handleGetSubmitList(this.fileList);
+    },
+
+    draggableUpdate() {
+      this.handleGetSubmitList(this.fileList);
+    },
+
+    getvideoCover(item) {
+      if (item.thumbUrl) {
+        return item.thumbUrl;
+      }
+      return this.default_cover;
+    }
+  },
+  components: {
+    videoModal,
+    vodUploadModal,
+    draggable,
+    [Icon.name]: Icon
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.upload {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 4px;
+
+  /deep/ .ant-upload-picture-card-wrapper {
+    display: inline-flex;
+    width: unset;
+    margin-right: 8px;
+    .ant-upload.ant-upload-select-picture-card {
+      width: 140px;
+      height: 120px;
+      margin: unset;
+      background: #fafafa;
+      border-color: #d5d5d5;
+      .uploader-btn {
+        .uploader-icon {
+          font-size: 30px;
+          color: #000000;
+        }
+        .uploader-text {
+          width: 140px;
+          p {
+            color: #585858;
+            margin-bottom: 4px;
+          }
+          span {
+            color: #b6b6b6;
+            font-size: 12px;
+          }
+          .guage-text {
+            color: #585858;
+            font-size: 14px;
+          }
+        }
+      }
+      &:hover {
+        background: #f3f7ff;
+        border-color: #5585f5;
+        .uploader-btn .uploader-icon,
+        .uploader-btn .uploader-text p,
+        .uploader-btn .uploader-text span {
+          color: #5585f5;
+        }
+      }
+    }
+  }
+}
+.show-list {
+  display: inline-flex;
+  flex-wrap: wrap;
+}
+.vod-wrap {
+  position: relative;
+  display: inline-block;
+  background-color: #fff;
+  width: 140px;
+  height: 120px;
+  margin-right: 8px;
+  margin-bottom: 8px;
+  border: 1px dashed #eeeeee;
+  border-radius: 4px;
+  background-color: #fff;
+  .vod-uploading {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: #fafafa;
+    .progress-wrap {
+      padding: 3px;
+    }
+    .uploading-msg {
+      color: #333;
+      font-size: 12px;
+      text-align: center;
+    }
+    .uploading-mask {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      min-height: 20%;
+      background: rgba(0, 0, 0, 0.3);
+      color: #fff;
+      text-align: center;
+    }
+  }
+
+  .vod-def-bg {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(50, 50, 51, 0.5);
+    .icon-vod-def {
+      font-size: 40px;
+      opacity: 0.3;
+      transform: scale3d(2, 2, 2);
+      transition: all 0.25s ease-out;
+    }
+    .vod-cover-img {
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+      border-radius: 4px;
+    }
+    .tooltip-wrap {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      width: 120px;
+      height: 40px;
+      color: #fff;
+      background: #22de4b;
+      border-radius: 4px;
+      .upload-img {
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        margin-right: 10px;
+      }
+      &.error-wrap {
+        flex-direction: column;
+        width: 158px;
+        height: 72px;
+        background: #e02020;
+        span {
+          height: 20px;
+          line-height: 20px;
+          margin-bottom: 8px;
+        }
+      }
+    }
+    &.vod-done {
+      .tooltip-wrap {
+        opacity: 0;
+        &.is-new {
+          animation: fadeOut 2.5s 1 both;
+          @keyframes fadeOut {
+            0% {
+              opacity: 1;
+            }
+            80% {
+              opacity: 1;
+            }
+            100% {
+              opacity: 0;
+            }
+          }
+        }
+      }
+    }
+    &.vod-done:hover {
+      .icon-wrap {
+        background: rgba(0, 0, 0, 0.2);
+      }
+      .theme_outlined {
+        display: none;
+      }
+      .theme_filled {
+        display: inline-block;
+      }
+    }
+  }
+}
+// .vod-wrap {
+//   &:first-child {
+//     margin-left: 8px;
+//   }
+// }
+
+.uploader-preview-wrap {
+  .uploader-mask {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    color: #fff;
+    background-color: rgba(50, 50, 51, 0.88);
+
+    .uploading-msg {
+      font-size: 12px;
+    }
+  }
+  .uploader-preview-delete {
+    position: absolute;
+    top: -16px;
+    right: -7px;
+    width: 16px;
+    height: 16px;
+    z-index: 10;
+
+    .pre-delete {
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background: #fff;
+      color: #e02020;
+      font-size: 20px;
+      cursor: pointer;
+    }
+  }
+}
+
+.icon-wrap {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  font-size: 28px;
+  z-index: 1;
+  .icon-play {
+    position: relative;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    transition: all 0.25s ease-out;
+  }
+  .theme_outlined {
+    display: inline-block;
+  }
+  .theme_filled {
+    display: none;
+  }
+}
+
+.chunk-uploader-btn {
+  display: table;
+  width: 140px;
+  height: 120px;
+  margin-right: 8px;
+  background: #fafafa;
+  text-align: center;
+  vertical-align: top;
+  border: 1px dashed #d5d5d5;
+  border-radius: 4px;
+  transition: border-color 0.3s ease;
+  -webkit-transition: border-color 0.3s ease;
+  cursor: pointer;
+  &.disable-upload {
+    cursor: not-allowed;
+  }
+
+  .chunk-btn-content {
+    display: table-cell;
+    width: 100%;
+    height: 100%;
+    // padding: 8px;
+    text-align: center;
+    vertical-align: middle;
+
+    .c-uploader-btn {
+      line-height: 1.5;
+      img {
+        width: 32px;
+        height: 32px;
+      }
+      .uploader-icon {
+        font-size: 30px;
+        color: #000000;
+      }
+      .uploader-text {
+        width: 140px;
+        p {
+          color: #585858;
+          margin-bottom: 0px;
+        }
+        span {
+          color: #b6b6b6;
+          font-size: 12px;
+        }
+        .guage-text {
+          color: #585858;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  &:hover {
+    background: #f3f7ff;
+    border-color: #5585f5;
+    .guage-img {
+      content: url('../../../src/assets/img/video_hover.png');
+    }
+    .c-uploader-btn .uploader-icon,
+    .c-uploader-btn .uploader-text p,
+    .c-uploader-btn .uploader-text span,
+    .c-uploader-btn .uploader-text .guage-text {
+      color: #5585f5;
+    }
+  }
+}
+</style>