Преглед изворни кода

润天海外版-视频资源上传修改

Long пре 3 дана
родитељ
комит
513a693b70
3 измењених фајлова са 121 додато и 153 уклоњено
  1. 1 1
      .env.prod-rthyb
  2. 5 1
      src/utils/hsy.js
  3. 115 151
      src/views/course/videoResource/index.vue

+ 1 - 1
.env.prod-rthyb

@@ -3,7 +3,7 @@ VUE_APP_TITLE =润天海外版管理系统
 # 首页菜单标题
 VUE_APP_TITLE_INDEX =润天
 # 公司名称
-VUE_APP_COMPANY_NAME =福州市木易华康医药有限公司
+VUE_APP_COMPANY_NAME =润天海外版
 # ICP备案号
 VUE_APP_ICP_RECORD =闽ICP备2020016609号-3
 # ICP网站访问地址

+ 5 - 1
src/utils/hsy.js

@@ -13,8 +13,9 @@ export const uploadToHSY = async (file, onProgress, type, callBackUp) => {
     }
 
     const uploader = new TTUploader({
-      appId: '917052',
+      appId: '919518',
       userId: '68185444',
+      region: 'ap-southeast-1',
       videoConfig: {
         spaceName: spaceName,
       }
@@ -55,6 +56,9 @@ export const uploadToHSY = async (file, onProgress, type, callBackUp) => {
 
       // 上传完成
       uploader.on('complete', (info) => {
+        onProgress && onProgress({
+          percent: 100,
+        })
         resolve({
           ...info.uploadResult,
           fileKey,

+ 115 - 151
src/views/course/videoResource/index.vue

@@ -287,40 +287,35 @@
               </span>
 
               <div v-if="file.status === 'uploading'" class="el-upload-list__item-progress">
-                <div class="dual-upload-progress">
-                  <div class="total-progress">
-                    <el-progress
-                      :percentage="currentUploadProgress.total"
-                      :show-text="true"
-                      :width="52"
-                      :format="() => `${Math.round(currentUploadProgress.total)}%`"
-                    ></el-progress>
-                  </div>
-                  <div class="line-progress-container">
-                    <div class="line-progress-item">
-                      <span class="line-label">线路1:</span>
-                      <el-progress
-                        :percentage="currentUploadProgress.line1"
-                        :show-text="false"
-                        :width="30"
-                        :status="currentUploadProgress.line1Status === 'success' ? 'success' :
-                                currentUploadProgress.line1Status === 'failed' ? 'exception' : ''"
-                      ></el-progress>
-                      <span class="line-status-text">{{ Math.round(currentUploadProgress.line1) }}%</span>
-                    </div>
-                    <div class="line-progress-item">
-                      <span class="line-label">线路2:</span>
-                      <el-progress
-                        :percentage="currentUploadProgress.line2"
-                        :show-text="false"
-                        :width="30"
-                        :status="currentUploadProgress.line2Status === 'success' ? 'success' :
-                                currentUploadProgress.line2Status === 'failed' ? 'exception' : ''"
-                      ></el-progress>
-                      <span class="line-status-text">{{ Math.round(currentUploadProgress.line2) }}%</span>
-                    </div>
-                  </div>
-                </div>
+                  <el-progress
+                    :percentage="currentUploadProgress"
+                    :show-text="true"
+                    :width="52"
+                  ></el-progress>
+<!--                  <div class="line-progress-container">-->
+<!--                    <div class="line-progress-item">-->
+<!--                      <span class="line-label">线路1:</span>-->
+<!--                      <el-progress-->
+<!--                        :percentage="currentUploadProgress.line1"-->
+<!--                        :show-text="false"-->
+<!--                        :width="30"-->
+<!--                        :status="currentUploadProgress.line1Status === 'success' ? 'success' :-->
+<!--                                currentUploadProgress.line1Status === 'failed' ? 'exception' : ''"-->
+<!--                      ></el-progress>-->
+<!--                      <span class="line-status-text">{{ Math.round(currentUploadProgress.line1) }}%</span>-->
+<!--                    </div>-->
+<!--                    <div class="line-progress-item">-->
+<!--                      <span class="line-label">线路2:</span>-->
+<!--                      <el-progress-->
+<!--                        :percentage="currentUploadProgress.line2"-->
+<!--                        :show-text="false"-->
+<!--                        :width="30"-->
+<!--                        :status="currentUploadProgress.line2Status === 'success' ? 'success' :-->
+<!--                                currentUploadProgress.line2Status === 'failed' ? 'exception' : ''"-->
+<!--                      ></el-progress>-->
+<!--                      <span class="line-status-text">{{ Math.round(currentUploadProgress.line2) }}%</span>-->
+<!--                    </div>-->
+<!--                  </div>-->
               </div>
             </div>
           </el-upload>
@@ -465,36 +460,10 @@
               <div v-else class="total-progress-row">
                 <span class="progress-label">总进度:</span>
                 <el-progress
-                  :percentage="scope.row.progress || 0"
+                  :percentage="scope.row.uploadDetails.line1 || 0"
                   :status="getProgressStatus(scope.row)"
-                  :show-text="true"
-                  :format="() => `${Math.round(scope.row.progress || 0)}%`"
                 ></el-progress>
               </div>
-              <div v-if="scope.row.uploadDetails && scope.row.uploadStatus !== 'queued'" class="line-progress-rows">
-                <div class="line-progress-row">
-                  <span class="line-label">线路1:</span>
-                  <el-progress
-                    :percentage="scope.row.uploadDetails.line1 || 0"
-                    :status="scope.row.uploadDetails.line1Status === 'success' ? 'success' :
-                            scope.row.uploadDetails.line1Status === 'failed' ? 'exception' : 'warning'"
-                    :show-text="false"
-                    style="width: 60px;"
-                  ></el-progress>
-                  <span class="line-percentage">{{ Math.round(scope.row.uploadDetails.line1 || 0) }}%</span>
-                </div>
-                <div class="line-progress-row">
-                  <span class="line-label">线路2:</span>
-                  <el-progress
-                    :percentage="scope.row.uploadDetails.line2 || 0"
-                    :status="scope.row.uploadDetails.line2Status === 'success' ? 'success' :
-                            scope.row.uploadDetails.line2Status === 'failed' ? 'exception' : 'warning'"
-                    :show-text="false"
-                    style="width: 60px;"
-                  ></el-progress>
-                  <span class="line-percentage">{{ Math.round(scope.row.uploadDetails.line2 || 0) }}%</span>
-                </div>
-              </div>
             </div>
           </template>
 
@@ -511,16 +480,16 @@
             >
               {{ scope.row.uploadStatus === 'queued' ? '取消' : '删除' }}
             </el-button>
-            <el-button
-              v-if="scope.row.progress < 100 && scope.row.uploadStatus === 'failed'"
-              size="mini"
-              type="text"
-              icon="el-icon-refresh"
-              @click="retryBatchUpload(scope.row)"
-              style="color: #E6A23C;"
-            >
-              重试
-            </el-button>
+<!--            <el-button-->
+<!--              v-if="scope.row.progress < 100 && scope.row.uploadStatus === 'failed'"-->
+<!--              size="mini"-->
+<!--              type="text"-->
+<!--              icon="el-icon-refresh"-->
+<!--              @click="retryBatchUpload(scope.row)"-->
+<!--              style="color: #E6A23C;"-->
+<!--            >-->
+<!--              重试-->
+<!--            </el-button>-->
           </template>
         </el-table-column>
       </el-table>
@@ -936,13 +905,7 @@ export default {
       hasMinimizableDialog: false,
       // 新增上传相关状态
       isUploading: false,
-      currentUploadProgress: {
-        total: 0,
-        line1: 0,
-        line2: 0,
-        line1Status: 'pending',
-        line2Status: 'pending'
-      },
+      currentUploadProgress: 0,
       // 上传任务队列
       uploadQueue: [], // 上传队列
       currentBatchSize: 2, // 每批上传数量
@@ -1365,17 +1328,18 @@ export default {
     //上传火山云
     async uploadVideoToHsy(file, form, onProgress) {
       try {
-        this.updateUploadProgress('line2Status', 'uploading');
+        // this.updateUploadProgress('line2Status', 'uploading');
 
         const data = await uploadToHSY(
           file,
           (progress) => {
             // 火山云的进度是小数0-1
             if (typeof progress.percent === 'number') {
-              const percent = Math.floor(progress.percent * 100);
+              const percent = progress.percent
 
               // 更新线路2进度
-              this.updateUploadProgress('line2', percent);
+              // this.updateUploadProgress('line2', percent);
+              this.currentUploadProgress = percent
 
               // 对外统一 progress 事件(模拟 xhr)
               onProgress?.({
@@ -1388,13 +1352,14 @@ export default {
 
             // 状态同步(成功 / 失败)
             if (progress.status === 'success') {
-              this.updateUploadProgress('line2Status', 'success');
-              this.updateUploadProgress('line2', 100);
+              // this.updateUploadProgress('line2Status', 'success');
+              // this.updateUploadProgress('line2', 100);
+              this.currentUploadProgress = 100;
             }
 
-            if (progress.status === 'failed') {
-              this.updateUploadProgress('line2Status', 'failed');
-            }
+            // if (progress.status === 'failed') {
+            //   this.updateUploadProgress('line2Status', 'failed');
+            // }
           },
           1,
           (uploadInfo) => {
@@ -1407,16 +1372,17 @@ export default {
         );
         console.log("上传火山云返回参数",data)
 
-        form.line2 = `${process.env.VUE_APP_VIDEO_URL}/${data.SourceInfo.FileName}`;
+        this.form.line1 = `${process.env.VUE_APP_VIDEO_URL}/${data.SourceInfo.FileName}`;
+        this.form.videoUrl = `${process.env.VUE_APP_VIDEO_URL}/${data.SourceInfo.FileName}`;
         this.form.hsyVid = data.Vid
         this.form.hsyVodUrl = process.env.VUE_APP_VIDEO_URL+"/"+data.SourceInfo.FileName
         console.log("this.form",this.form)
-        this.$message.success('线路二上传成功');
-        return { success: true, url: form.line2 };
+        this.$message.success('上传成功');
+        return { success: true, url: form.line1 };
 
       } catch (error) {
-        this.updateUploadProgress('line2Status', 'failed');
-        this.$message.error('线路二上传失败');
+        // this.updateUploadProgress('line2Status', 'failed');
+        this.$message.error('上传失败');
         return { success: false, error: error?.message || 'upload failed' };
       }
     },
@@ -1448,38 +1414,40 @@ export default {
       this.form.tempId = Math.random().toString(36).substring(2, 15);
       const file = options.file;
       this.getMediaDuration(file);
-      this.currentUploadProgress = { total: 0, line1: 0, line2: 0, line1Status: 'pending', line2Status: 'pending' };
+      this.currentUploadProgress = 0;
 
       try {
         await this.getFirstThumbnail(file, this.form);
-        const [line1Result, line2Result] = await Promise.allSettled([
-          this.uploadVideoToTxPcdn(file, this.form, options.onProgress),
-          //this.uploadVideoToHwObs(file, this.form, options.onProgress)
-          this.uploadVideoToHsy(file, this.form, options.onProgress)
-        ]);
-
-        const line1Success = line1Result.status === 'fulfilled' && line1Result.value.success;
-        const line2Success = line2Result.status === 'fulfilled' && line2Result.value.success;
-
-        if (line1Success && line2Success) {
-          this.form.uploadStatus = 'success';
-          this.form.uploadProgress = { total: 100, line1: 100, line2: 100, line1Status: 'success', line2Status: 'success' };
-          this.currentUploadProgress.total = 100;
-          this.$message.success("视频上传完成!两个线路都上传成功");
-        } else {
-          this.form.uploadStatus = 'failed';
-          this.form.uploadProgress = {
-            total: this.currentUploadProgress.total,
-            line1: this.currentUploadProgress.line1,
-            line2: this.currentUploadProgress.line2,
-            line1Status: this.currentUploadProgress.line1Status,
-            line2Status: this.currentUploadProgress.line2Status
-          };
-          const failedLines = [];
-          if (!line1Success) failedLines.push('线路1');
-          if (!line2Success) failedLines.push('线路2');
-          this.$message.error(`视频上传失败!${failedLines.join('、')} 上传失败,请重试`);
-        }
+        // const [line1Result, line2Result] = await Promise.allSettled([
+        //   this.uploadVideoToTxPcdn(file, this.form, options.onProgress),
+        //   //this.uploadVideoToHwObs(file, this.form, options.onProgress)
+        //   this.uploadVideoToHsy(file, this.form, options.onProgress)
+        // ]);
+
+        await this.uploadVideoToHsy(file, this.form, options.onProgress)
+
+        // const line1Success = line1Result.status === 'fulfilled' && line1Result.value.success;
+        // const line2Success = line2Result.status === 'fulfilled' && line2Result.value.success;
+
+        // if (line1Success && line2Success) {
+        //   this.form.uploadStatus = 'success';
+        //   this.form.uploadProgress = { total: 100, line1: 100, line2: 100, line1Status: 'success', line2Status: 'success' };
+        //   this.currentUploadProgress.total = 100;
+        //   this.$message.success("视频上传完成!两个线路都上传成功");
+        // } else {
+        //   this.form.uploadStatus = 'failed';
+        //   this.form.uploadProgress = {
+        //     total: this.currentUploadProgress.total,
+        //     line1: this.currentUploadProgress.line1,
+        //     line2: this.currentUploadProgress.line2,
+        //     line1Status: this.currentUploadProgress.line1Status,
+        //     line2Status: this.currentUploadProgress.line2Status
+        //   };
+        //   const failedLines = [];
+        //   if (!line1Success) failedLines.push('线路1');
+        //   if (!line2Success) failedLines.push('线路2');
+        //   this.$message.error(`视频上传失败!${failedLines.join('、')} 上传失败,请重试`);
+        // }
         this.form.fileName = file.name;
         this.form.fileSize = file.size;
       } catch (error) {
@@ -1591,8 +1559,7 @@ export default {
       }
 
       // 检查是否所有选中的视频都已上传完成
-      console.log("videoList",this.videoList)
-      const incompleteVideos = this.videoList.filter(item => (item.progress || 0) < 100);
+      const incompleteVideos = this.videoList.filter(item => (item.uploadDetails.line1 || 0) < 100);
       if (incompleteVideos.length > 0) {
         this.$message.warning('有未完成上传的视频,请先完成上传');
         return;
@@ -1874,7 +1841,6 @@ export default {
       this.isProcessingBatch = false;
       this.isUploading = false;
       this.$message.success('所有视频上传队列处理完成!');
-      console.log("批量上传form",this.form)
     },
 
     async uploadSingleVideo(tempVideo) {
@@ -1883,35 +1849,29 @@ export default {
         await this.getFirstThumbnail(tempVideo.file, tempVideo);
 
         // 并行上传到两个服务器
-        const [line1Result, line2Result] = await Promise.allSettled([
-          this.uploadVideoToTxPcdnBatch(tempVideo.file, tempVideo),
-          // this.uploadVideoToHwObsBatch(tempVideo.file, tempVideo)
-          this.uploadVideoToHSYBatch(tempVideo.file, tempVideo),
+        // const [line1Result, line2Result] = await Promise.allSettled([
+        //   this.uploadVideoToTxPcdnBatch(tempVideo.file, tempVideo),
+        //   // this.uploadVideoToHwObsBatch(tempVideo.file, tempVideo)
+        //   this.uploadVideoToHSYBatch(tempVideo.file, tempVideo),
+        //
+        // ]);
 
-        ]);
+        let res = await this.uploadVideoToHSYBatch(tempVideo.file, tempVideo)
 
         // 检查上传结果
-        const line1Success = line1Result.status === 'fulfilled' && line1Result.value.success;
-        const line2Success = line1Result.status === 'fulfilled' && line1Result.value.success;
+        // const line1Success = line1Result.status === 'fulfilled' && line1Result.value.success;
+        // const line2Success = line1Result.status === 'fulfilled' && line1Result.value.success;
 
         const index = this.videoList.findIndex(item => item.tempId === tempVideo.tempId);
         if (index !== -1) {
-          if (line1Success && line2Success) {
-            this.videoList[index].progress = 100;
-            this.videoList[index].uploadStatus = 'success';
-            this.videoList[index].uploadDetails.line1Status = 'success';
-            this.videoList[index].uploadDetails.line2Status = 'success';
-            this.videoList[index].uploadDetails.line1 = 100;
-            this.videoList[index].uploadDetails.line2 = 100;
+          if (res.success) {
+            this.videoList[index].uploadStatus = 'success'
           } else {
-            this.videoList[index].uploadStatus = 'failed';
-            this.videoList[index].uploadDetails.line1Status = line1Success ? 'success' : 'failed';
-            this.videoList[index].uploadDetails.line2Status = line2Success ? 'success' : 'failed';
-            this.updateBatchProgress(index);
+            this.videoList[index].uploadStatus = 'failed'
           }
         }
 
-        return { success: line1Success && line2Success, tempVideo };
+        return { success: res.success, tempVideo };
       } catch (error) {
         const index = this.videoList.findIndex(item => item.tempId === tempVideo.tempId);
         if (index !== -1) {
@@ -2236,23 +2196,27 @@ export default {
     async uploadVideoToHSYBatch(file, tempVideo) {
       try {
         const data = await uploadToHSY(file, (progress) => {
-          const progressPercent = Math.floor(progress);
+          const progressPercent = progress.percent;
           const index = this.videoList.findIndex(item => item.tempId === tempVideo.tempId);
           if (index !== -1) {
-            this.videoList[index].uploadDetails.line2 = progressPercent;
-            this.videoList[index].uploadDetails.line2Status = 'uploading';
-            this.updateBatchProgress(index);
+            this.videoList[index].uploadDetails.line1 = progressPercent;
+            // this.videoList[index].uploadDetails.line1Status = 'uploading';
+            // this.updateBatchProgress(index);
+          }
+
+          if (progress.status === 'success') {
+            this.videoList[index].uploadDetails.line1 = 100
           }
         }, 1, (uploadInfo) => {
           const tokens = this.uploadCancellationTokens.get(tempVideo.tempId) || {};
           tokens.obs = uploadInfo.cancel;
           this.uploadCancellationTokens.set(tempVideo.tempId, tokens);
         });
-        console.log("批量上传返回参数",data)
-        tempVideo.line2 = `${process.env.VUE_APP_VIDEO_URL}/${data.SourceInfo.FileName}`;
+        tempVideo.line1 = `${process.env.VUE_APP_VIDEO_URL}/${data.SourceInfo.FileName}`;
+        tempVideo.videoUrl = `${process.env.VUE_APP_VIDEO_URL}/${data.SourceInfo.FileName}`;
         tempVideo.hsyVid = data.Vid;
 
-        return { success: true, url: tempVideo.line2};
+        return { success: true, url: tempVideo.line1};
       } catch (error) {
         return { success: false, error: error.message };
       }
@@ -2509,12 +2473,12 @@ export default {
     },
     // 获取进度条状态
     getProgressStatus(row) {
-      if (row.progress === 100 && row.uploadStatus === 'success') {
+      if (row.progress === 100 || row.uploadStatus === 'success') {
         return 'success';
       } else if (row.uploadStatus === 'failed') {
         return 'exception';
       }
-      return '';
+      return undefined;
     },
   }
 }