client-base-v5/src/window/tabFormWidget/VideoListWidget.vue

<template>
  <div>
    <div
      v-for="(item, index) in newFieldValue.displayValue"
      :key="index"
      class="room_img"
    >
      <video controls="true" :src="getVideoSrc(item)" />
      <span
        v-if="!readonly"
        class="glyphicon glyphicon-trash"
        @click="removeVideo(item)"
      />
    </div>
    <div>
      <div v-if="!readonly" enctype="multipart/form-data">
        <label :for="'file' + field.fieldId" class="label-btn">
          {{ $t("lang.VideoListWidget.selectVideo") }}
        </label>
        <input
          :id="'file' + field.fieldId"
          autocomplete="off"
          type="file"
          class="inputfile"
          @change="onFileChange"
        />
      </div>
    </div>
    <Loading v-if="loading" />
  </div>
</template>
<script>

import AuthImage from '../../widget/AuthImage.vue';
import Common from '../../common/Common.js';
import { notificationError } from '../../common/notification.js';
import { Notify, Uuid } from 'pc-component-v3';

export default {

  components: {
    AuthImage,
  },

  
  props: {
   
    readonly: {
      type: Boolean,
      default: null,
    },
    className: {
      type: String,
      default: null,
    },
    field: {
      type: Object,
      default : function(){
        return null;
      },
    },
    fieldValue: {
      type: Object,
      default : function(){
        return null;
      },
    },
  },

  
  emits: ['valueChanged'],

  data: function () {
    this.Common = Common;
    return {
      newFieldValue: {
        displayValue: [],
        displayType: 'String',
      },
      loading: false,
    };
  },

  mounted: function () {
    var _self = this;
    var displayValue = _self.fieldValue.displayValue;
    if (displayValue != undefined && displayValue.length > 0) {
      _self.newFieldValue.displayValue = displayValue[0].split(',');
    }
  },

  methods: {
    /**
     * 删除视频
     * @param  {String} item 图片Name
     */
    removeVideo(item) {
      let _self = this;
      var index = _self.newFieldValue.displayValue.indexOf(item);
      if (index > -1) {
        _self.newFieldValue.displayValue.splice(index, 1);
      }
      var videos = _self.newFieldValue.displayValue.join(',');
      _self.fieldValue.displayValue[0] = videos;
      this.$emit('valueChanged', _self.fieldValue);
    },

    /**
     * 选择视频发生改变
     * @param  {[type]} e [description]
     * @return {[type]}   [description]
     */
    onFileChange(e) {
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.uploadVideo(files[0]);
    },

    /**
     * 上传视频
     * @param  {File} selectedFile 选择的文件
     */
    uploadVideo: function (selectedFile) {
      var _self = this;
      if (selectedFile == undefined) {
        return;
      }
      if (!/video\/\w+/.test(selectedFile.type)) {
        Notify.error('错误', '请确保文件为视频类型', true);
        return;
      }
      var formData = new FormData();
      formData.append('video', selectedFile);
      formData.append('className', _self.className);
      _self.loading=true;
      $.ajax({
        url: Common.getApiURL('file/videoUpload'),
        type: 'post',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        data: formData,
        contentType: false,
        processData: false,
        success: function (data) {
          _self.loading=false;
          console.log(data);
          if (data.errorCode == 0) {
            var videoNames = data.datas;
            _self.addVideos(videoNames);
          } else {
            notificationError(data.errorMessage, '视频上传失败');
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading=false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    
    /**
     * 添加视频
     * @param {String} videoNames 添加的图片名称
     */
    addVideos: function (videoNames) {
      var _self = this;
      if (_self.newFieldValue.displayValue == undefined) {
        _self.newFieldValue.displayValue = new Array();
      }

      if(videoNames != null){
        videoNames.forEach(element => {
          _self.newFieldValue.displayValue.push(element);
        });
      }
      
      var videos = _self.newFieldValue.displayValue.join(',');
      _self.fieldValue.displayValue[0] = videos;
      this.$emit('valueChanged', _self.fieldValue);
    },

    /**
     * 获取视频地址
     * @param  {String} item 图片名称
     * @return {String}      图片URL地址
     */
    getVideoSrc: function (item) {
      var _self = this;
      if (item != undefined && item != null) {
        return Common.getVideoSrc(_self.className, item);
      } else {
        return '';
      }
    },
  },
};
</script>

<style scoped>
.inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.room_img {
  width: 150px;
  height: 100px;
  float: left;
  margin-right: 10px;
}

.room_img video {
  width: 100%;
  height: 100%;
}

.room_img span {
  position: relative;
  right: -125px;
  top: -95px;
  font-size: 20px;
  color: red;
  cursor: pointer;
}

.label-btn {
  color: white;
  background-color: #006699;
  display: inline-block;
  padding: 5px 15px;
  border-radius: 5px;
}

.label-btn:hover {
  color: white;
  background-color: #003399;
  display: inline-block;
  padding: 5px 15px;
  border-radius: 5px;
  cursor: pointer;
}
</style>