dvcp_v2_webapp/project/xiushan/apps/AppVideoPublic/vpAdd.vue

<template>
  <section class="vpAdd">
    <ai-detail>
      <ai-title slot="title" :title="addTitle" isShowBottomBorder isShowBack @onBackClick="back"/>
      <template #content>
        <el-form size="small" label-width="120px" :model="form" ref="VideoForm" :rules="rules">
          <ai-card title="基本信息">
            <template #content>
              <el-form-item label="标题" prop="title">
                <el-input v-model="form.title" placeholder="请输入" clearable show-word-limit maxlength="30"/>
              </el-form-item>
              <el-form-item label="排序" prop="showIndex">
                <el-input v-model.number="form.showIndex" placeholder="请输入" clearable/>
              </el-form-item>
              <el-form-item label="视频" prop="videoUrl">
                <video v-if="hasVideo" class="video-com" muted :src="form.videoUrl" controls="controls"/>
                <el-upload :show-file-list="false" ref="upload1" action :http-request="submitUpload"
                           :accept="accept" :limit="1">
                  <div class="video" v-if="!hasVideo">
                    <div class="icon">
                      <ai-icon type="svg" icon="iconVideo"/>
                      <span>上传视频</span>
                    </div>
                    <span class="tips">支持mp4格式，单个文件最大100MB</span>
                  </div>
                  <el-button v-else style="margin-top: 10px;">重新选择</el-button>
                </el-upload>
              </el-form-item>
              <el-form-item label="视频封面" prop="thumbUrl">
                <ai-uploader :instance="instance" :value="thumb" @change="handleUploader" key="file" :limit="1">
                  <template slot="tips">
                    <p>最多上传1张图片,单个文件最大10MB，支持jpg、jpeg、png格式</p>
                  </template>
                </ai-uploader>
              </el-form-item>
            </template>
          </ai-card>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="back">取消</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
      </template>
    </ai-detail>
  </section>
</template>

<script>
import mp4box from "mp4box";

export default {
  name: "vpAdd",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    addTitle() {
      return !!this.$route.query.id ? "编辑视频" : "添加视频"
    },
    rules() {
      return {
        title: [{required: true, message: "请输入标题"}],
        thumbUrl: [{required: true, message: "请上传视频封面"}],
        videoUrl: [{required: true, message: "请上传视频"}],
        showIndex: [{required: true, message: "请输入排序"}],
      }
    },
    hasVideo() {
      return !!this.form.videoUrl
    },
    thumb() {
      return this.form.thumbUrl ? [{url: this.form.thumbUrl}] : []
    }
  },
  data() {
    return {
      dialog: false,
      form: {videoUrl: "", thumbUrl: "", title: ""},
      accept: ".mp4"
    }
  },
  methods: {
    getDetail() {
      let {id} = this.$route.query
      id && this.instance.post("/app/appvideonews/getById", null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          this.form = res.data
        }
      })
    },
    submit() {
      this.$refs.VideoForm.validate(v => {
        if (v) {
          let {form} = this
          this.instance.post("/app/appvideonews/addOrUpdate", form).then(res => {
            if (res?.code == 0) {
              this.$message.success("提交成功!")
              this.back()
            }
          })
        }
      })
    },
    back() {
      this.$router.push({})
    },
    submitUpload(file) {
      this.$refs.upload1?.clearFiles();
      const fileType = file.file.name.split(".")[1];
      const size = file.file.size / 1024 / 1024 > 100;
      let mp4boxfile = mp4box.createFile();
      const reader = new FileReader();
      reader.readAsArrayBuffer(file.file);
      reader.onload = (e) => {
        const arrayBuffer = e.target.result;
        arrayBuffer.fileStart = 0;
        mp4boxfile.appendBuffer(arrayBuffer);
      };
      mp4boxfile.onReady = (info) => {
        let codec = info.mime.match(/codecs="(\S*),/)[1]
        if (codec.indexOf('avc') === -1) {
          return this.$message.error("视频编码格式不支持")
        }
        if (size) {
          return this.$message.error("视频大小不能超过100M");
        }
        if (fileType && this.accept.indexOf(fileType.toLocaleLowerCase()) > -1) {
          let formData = new FormData()
          formData.append('file', file.file);
          this.instance.post(`/admin/file/add-unlimited`, formData).then(res => {
            if (res && res.data) {
              let videoList = res.data[0].split(";");
              this.form.videoUrl = videoList[0]
            }
          })
        } else {
          return this.$message.error("视频格式错误")
        }
      }
    },
    handleUploader(list) {
      this.form.thumbUrl = list?.[0]?.url
      this.$forceUpdate()
    }
  },
  created() {
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
.vpAdd {
  height: 100%;

  video {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

  :deep( input[type="number"] ){
    line-height: 1px !important;

    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
    }
  }

  .video {
    width: 640px;
    height: 360px;
    border-radius: 4px;
    border: 1px dashed #D0D4DC;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      span:nth-child(2) {
        display: inline-block;
        font-size: 16px;
        color: #333333;
        line-height: 30px;
      }

      .iconfont {
        display: inline-block;
        font-size: 40px;
        color: #2266FF;
      }
    }

    .tips {
      display: inline-block;
      font-size: 12px;
      color: #999999;
      line-height: 26px;
    }
  }
}
</style>