修改文件上传，添加文件上传状态提示

Flex

2025-06-06 035bcc1e9fe4b099a8f32108191a7c7842906782

 easegen-front/src/views/digitalcourse/digitalhumans/DigitalHumansForm.vue

@@ -8,13 +8,23 @@
      v-loading="formLoading"
    >
      <el-form-item :label="t('digitalhumans.name')" prop="name">
        <el-input v-model="formData.name" :placeholder="t('common.inputText') + t('digitalhumans.name')" />
        <el-input
          v-model="formData.name"
          :placeholder="t('common.inputText') + t('digitalhumans.name')"
        />
      </el-form-item>
      <el-form-item :label="t('digitalhumans.code')" prop="code" v-if="false" > // 当前数字人视频的编码类型
        <el-input v-model="formData.code" :placeholder="t('common.inputText') + t('digitalhumans.code')" />
      <el-form-item :label="t('digitalhumans.code')" prop="code" v-if="false">
        // 当前数字人视频的编码类型
        <el-input
          v-model="formData.code"
          :placeholder="t('common.inputText') + t('digitalhumans.code')"
        />
      </el-form-item>
      <el-form-item :label="t('digitalhumans.gender')" prop="gender">
        <el-select v-model="formData.gender" :placeholder="t('common.selectText')+t('digitalhumans.gender')">
        <el-select
          v-model="formData.gender"
          :placeholder="t('common.selectText') + t('digitalhumans.gender')"
        >
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
            :key="dict.value"
@@ -23,8 +33,12 @@
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="t('digitalhumans.useModel')" prop="useModel" v-if="false" > //数字人模式选择框
        <el-select v-model="formData.useModel" :placeholder="t('common.selectText')+t('digitalhumans.useModel')">
      <el-form-item :label="t('digitalhumans.useModel')" prop="useModel" v-if="false">
        //数字人模式选择框
        <el-select
          v-model="formData.useModel"
          :placeholder="t('common.selectText') + t('digitalhumans.useModel')"
        >
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.USE_MODEL)"
            :key="dict.value"
@@ -35,11 +49,15 @@
      </el-form-item>
      <el-form-item label="背景样式" prop="isTransparent">
        <el-select v-model="formData.isTransparent" placeholder="请选择是否去除背景">
          <el-option value="1" label="透明背景"/>
          <el-option value="2" label="绿幕背景"/>
          <el-option value="1" label="透明背景" />
          <el-option value="2" label="绿幕背景" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="formData.useModel == 1" :label="t('digitalhumans.picture')" prop="pictureUrl">
      <el-form-item
        v-if="formData.useModel == 1"
        :label="t('digitalhumans.picture')"
        prop="pictureUrl"
      >
        <UploadImg v-if="formData" v-model="formData.fixPictureUrl" />
        <UploadImg v-else v-model="formData.pictureUrl" />
      </el-form-item>
@@ -47,13 +65,26 @@
      <el-form-item v-if="formData.useModel == 2" :label="t('digitalhumans.video')" prop="videoUrl">
        <!-- 原本自带的视频上传 -->
        <!-- <UploadFile v-if="!(formData.videoUrl || formData.fixVideoUrl)" v-model="formData.videoUrl" :fileType="['mp4','mov']" :limit="1" @on-success="handleFileSuccess('videoUrl', $event)"/> -->
        <UploadFile v-if="!(formData.fixVideoUrl)" v-model="formData.videoUrl" :fileType="['mp4','mov']" :limit="1" @on-success="handleFileSuccess('videoUrl', $event)"/>
        <!-- <UploadFile v-if="!(formData.fixVideoUrl)" v-model="formData.videoUrl" :fileType="['mp4','mov']" :limit="1" @on-success="handleFileSuccess('videoUrl', $event)"/> -->
        <!-- 修改完善后的文件上传组件，原组件无法判断文件上传中与文件上传结束两种状态 -->
        <FileUploadComent
          v-if="!formData.fixVideoUrl"
          v-model="formData.videoUrl"
          :fileType="['mp4', 'mov']"
          :limit="1"
          @fileUploadEnd="FileUploadEnd"
          @fileUploadStart="FileUploadStart"
          @on-success="handleFileSuccess('videoUrl', $event)"
        />
        <!-- 原视频播放器 -->
        <!-- <video-player v-if="formData.videoUrl || formData.fixVideoUrl" :property="videoProperty"/> -->
         <!-- 新的视频播放器 -->
        <VideoPlayerMov  v-if="formData.videoUrl || formData.fixVideoUrl" :property="videoProperty"/>
        <!-- 新的视频播放器 -->
        <VideoPlayerMov
          v-if="formData.videoUrl || formData.fixVideoUrl"
          :property="videoProperty"
        />
      </el-form-item>
<!--      <el-form-item :label="抠图标识" prop="matting">
      <!--      <el-form-item :label="抠图标识" prop="matting">
        <el-select v-model="formData.matting" :placeholder="请选择抠图标识">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.DIGITALCOURSE_DIGITALHUMAN_MATTING)"
@@ -64,7 +95,10 @@
        </el-select>
      </el-form-item>-->
      <el-form-item :label="t('digitalhumans.posture')" prop="posture">
        <el-select v-model="formData.posture" :placeholder="t('common.selectText') + t('digitalhumans.posture')">
        <el-select
          v-model="formData.posture"
          :placeholder="t('common.selectText') + t('digitalhumans.posture')"
        >
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.DIGITALCOURSE_DIGITALHUMAN_POSTURE)"
            :key="dict.value"
@@ -74,7 +108,10 @@
        </el-select>
      </el-form-item>
      <el-form-item :label="t('digitalhumans.type')" prop="type">
        <el-select v-model="formData.type" :placeholder="t('common.selectText') + t('digitalhumans.type')">
        <el-select
          v-model="formData.type"
          :placeholder="t('common.selectText') + t('digitalhumans.type')"
        >
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.DIGITALCOURSE_DIGITALHUMAN_TYPE)"
            :key="dict.value"
@@ -85,21 +122,29 @@
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading" :loading="isUploading" >{{t('common.ok')}}</el-button>
      <el-button @click="dialogVisible = false">{{t('common.cancel')}}</el-button>
      <el-button
        @click="submitForm"
        type="primary"
        :disabled="formLoading"
        :loading="isUploading"
        >{{ t('common.ok') }}</el-button
      >
      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import  FileUploadComent  from './FileUploadComent.vue'
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import * as DigitalHumansApi from '@/api/digitalcourse/digitalhumans'
import VideoPlayer from "@/components/DiyEditor/components/mobile/VideoPlayer/index.vue";
import VideoPlayerMov from "@/components/DiyEditor/components/mobile/VideoPlayer_mov/index.vue";
import {DiyComponent} from "@/components/DiyEditor/util";
import {VideoPlayerProperty} from "@/components/DiyEditor/components/mobile/VideoPlayer/config";
import VideoPlayer from '@/components/DiyEditor/components/mobile/VideoPlayer/index.vue'
import VideoPlayerMov from '@/components/DiyEditor/components/mobile/VideoPlayer_mov/index.vue'
import { DiyComponent } from '@/components/DiyEditor/util'
import { VideoPlayerProperty } from '@/components/DiyEditor/components/mobile/VideoPlayer/config'
import { useUpload } from '@/components/UploadFile/src/useUpload'
import { el } from 'element-plus/es/locale';
import { any } from 'vue-types';
import { el } from 'element-plus/es/locale'
import { any } from 'vue-types'
import { start } from 'nprogress'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
@@ -126,7 +171,7 @@
  useGeneralModel: undefined,
  useModel: undefined,
  status: undefined,
  isTransparent: undefined,
  isTransparent: undefined
})

// 当前是否正在上传视频
@@ -144,11 +189,14 @@
  }
} as DiyComponent<VideoPlayerProperty>

watch(()=> formData.value.videoUrl,(newVal,oldValue)=>{
  if (newVal && newVal.length > 0){
    videoProperty.videoUrl = formData.value.fixVideoUrl || newVal
watch(
  () => formData.value.videoUrl,
  (newVal, oldValue) => {
    if (newVal && newVal.length > 0) {
      videoProperty.videoUrl = formData.value.fixVideoUrl || newVal
    }
  }
})
)
const formRules = reactive({
  gender: [{ required: true, message: '性别不能为空', trigger: 'change' }],
  name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
@@ -165,22 +213,31 @@
})
const formRef = ref() // 表单 Ref

const StartCes = () => {
  console.log( " ----- 开始 ----- " )
const FileUploadStart = () => {
  isUploading.value = true
}

const End = (res)=>{
  const FileObject = {
    file:res
  }
  httpRequest( FileObject ).then( response =>{
    console.log(response)
    formData.value.videoUrl = response.data;
  } ).finally( res => {
    isUploading.value = false
  } )
const FileUploadEnd = () => {
  isUploading.value = false
}

const StartCes = () => {
  console.log(' ----- 开始 ----- ')
  isUploading.value = true
}

const End = (res) => {
  const FileObject = {
    file: res
  }
  httpRequest(FileObject)
    .then((response) => {
      console.log(response)
      formData.value.videoUrl = response.data
    })
    .finally((res) => {
      isUploading.value = false
    })
}

/** 打开弹窗 */
@@ -197,7 +254,7 @@
    } finally {
      formLoading.value = false
    }
  }else{
  } else {
    InitHumMODEL()
  }
}
@@ -245,26 +302,26 @@
    type: undefined,
    useGeneralModel: undefined,
    useModel: undefined,
    status: undefined,
    status: undefined
  }
  formRef.value?.resetFields()
}
const handleFileSuccess = (fileType,response) => {
const handleFileSuccess = (fileType, response) => {
  alert('Pause')
  if (fileType === 'videoUrl') {
    formData.value.videoUrl = response.data;
  }
};

// 修改默认的数字人视频模式为视频

const InitHumMODEL = ()=>{
  let ModelList = getIntDictOptions( DICT_TYPE.USE_MODEL )
  for (let index = 0; index < ModelList.length; index++) {
    const element = ModelList[index];
    if( element.label === "视频" ){
      formData.value.useModel = Number( element.value )
    }
    formData.value.videoUrl = response.data
  }
}

// 修改默认的数字人视频模式为视频

const InitHumMODEL = () => {
  let ModelList = getIntDictOptions(DICT_TYPE.USE_MODEL)
  for (let index = 0; index < ModelList.length; index++) {
    const element = ModelList[index]
    if (element.label === '视频') {
      formData.value.useModel = Number(element.value)
    }
  }
}
</script>