数字人视频上传后支持预览

src/pages/caiji/rx/name.vue

@@ -74,6 +74,7 @@ function afterRead(file: any) {
       form.axi_rxcj_spwj_v2 = res.data.url
       file.status = 'finished';
       file.message = '上传成功';
+      file.url = res.data.url;
     } else {
       showFailToast(res?.msg)
       file.status = 'failed';
@@ -117,20 +118,33 @@ function changeMode(name: string) {
 // 2G 视频大小限制
 const videoSize = 2 * 1024 * 1024 * 1024;
 
-function beforeRead (file: any) {
+function beforeRead(file: any) {
   console.log('上传视频预校验 : ', file)
-  if(file.type !== 'video/mp4' && file.type !== 'video/mov' && file.type !== 'video/webm'){
-    showFailToast('视频类型'+file.type+'不支持采集，请上传 mp4、mov、webm 格式的视频')
+  if (file.type !== 'video/mp4' && file.type !== 'video/mov' && file.type !== 'video/webm' && file.type !== 'video/quicktime') {
+    showFailToast('视频类型' + file.type + '不支持采集，请上传 mp4、mov、webm 格式的视频')
     return false
   }
-  if (file.size > videoSize){
+  if (file.size > videoSize) {
     showFailToast('文件大小不能超过 2GB')
     return false
-  }else{
+  } else {
     return true
   }
 }
 
+const show = ref(false)
+const showVideo = ref()
+function handleClickPreview(file: any) {
+  console.log('file : ', file)
+  if (file.status === 'uploading') {
+    showFailToast('视频正在上传中，请稍后')
+  }
+  if (file.status === 'finished') {
+    showVideo.value = 'https://aimoocapi.bozedu.net/' + file.url
+    show.value = true
+  }
+}
+
 </script>
 
 <template>
@@ -150,25 +164,36 @@ function beforeRead (file: any) {
         </van-field>
         <van-field v-if="form.mode === '1'" name="录制视频" label="录制视频" :rules="[{ required: true, message: '录制视频不能为空' }]">
           <template #input>
-            <van-uploader v-model="form.file" :max-count="1" accept="video/mp4,video/mov,video/webm" capture="user" :after-read="afterRead"
-              :max-size="videoSize" :before-read="beforeRead ">
+            <van-uploader v-model="form.file" :max-count="1" accept="video/mp4,video/mov,video/webm,video/quicktime"
+              capture="user" :after-read="afterRead" :max-size="videoSize" :before-read="beforeRead"
+              @click-preview="handleClickPreview">
               <van-button type="primary">手机录制入口</van-button>
             </van-uploader>
           </template>
         </van-field>
         <van-field v-if="form.mode === '2'" name="上传视频" label="上传视频" :rules="[{ required: true, message: '上传视频不能为空' }]">
           <template #input>
-            <van-uploader v-model="form.file" :max-count="1" accept="video/mp4,video/mov,video/webm" :after-read="afterRead"
-              :max-size="videoSize" :before-read="beforeRead " />
+            <van-uploader v-model="form.file" :max-count="1" accept="video/mp4,video/mov,video/webm,video/quicktime"
+              :after-read="afterRead" :max-size="videoSize" :before-read="beforeRead" @click-preview="handleClickPreview">
+            </van-uploader>
           </template>
         </van-field>
 
       </van-cell-group>
       <div class="px-4 mt-20">
+        <!-- <div class="text-red-50">{{ showVideo }}</div> -->
         <van-button block type="primary" native-type="submit">
           提交
         </van-button>
       </div>
     </van-form>
   </div>
+  <van-overlay :show="show" @click="show = false">
+    <div class="flex justify-center items-center w-full h-full relative">
+      <div class="absolute right-4 top-4 z-1000">
+        <van-icon name="close" size="36" color="#fff" @click="show = false" />
+      </div>
+      <video class="w-96vw h-54vw object-contain " :src="showVideo" controls autoplay></video>
+    </div>
+  </van-overlay>
 </template>