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

src/utils/hsy.js

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

src/views/course/videoResource/index.vue

@@ -287,35 +287,40 @@
               </span>
 
               <div v-if="file.status === 'uploading'" class="el-upload-list__item-progress">
-                  <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 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>
               </div>
             </div>
           </el-upload>
@@ -460,11 +465,36 @@
               <div v-else class="total-progress-row">
                 <span class="progress-label">总进度:</span>
                 <el-progress
-                  :percentage="scope.row.uploadDetails.line1 || 0"
+                  :percentage="scope.row.progress || 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>
 
@@ -481,16 +511,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>
@@ -906,7 +936,13 @@ export default {
       hasMinimizableDialog: false,
       // 新增上传相关状态
       isUploading: false,
-      currentUploadProgress: 0,
+      currentUploadProgress: {
+        total: 0,
+        line1: 0,
+        line2: 0,
+        line1Status: 'pending',
+        line2Status: 'pending'
+      },
       // 上传任务队列
       uploadQueue: [], // 上传队列
       currentBatchSize: 2, // 每批上传数量
@@ -1329,18 +1365,17 @@ 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 = progress.percent
+              const percent = Math.floor(progress.percent * 100);
 
               // 更新线路2进度
-              // this.updateUploadProgress('line2', percent);
-              this.currentUploadProgress = percent
+              this.updateUploadProgress('line2', percent);
 
               // 对外统一 progress 事件（模拟 xhr）
               onProgress?.({
@@ -1351,16 +1386,15 @@ export default {
               });
             }
 
-            // // 状态同步（成功 / 失败）
+            // 状态同步（成功 / 失败）
             if (progress.status === 'success') {
-              // this.updateUploadProgress('line2Status', 'success');
-              // this.updateUploadProgress('line2', 100);
-              this.currentUploadProgress = 100;
+              this.updateUploadProgress('line2Status', 'success');
+              this.updateUploadProgress('line2', 100);
             }
 
-            // if (progress.status === 'failed') {
-            //   this.updateUploadProgress('line2Status', 'failed');
-            // }
+            if (progress.status === 'failed') {
+              this.updateUploadProgress('line2Status', 'failed');
+            }
           },
           1,
           (uploadInfo) => {
@@ -1373,17 +1407,16 @@ export default {
         );
         console.log("上传火山云返回参数",data)
 
-        this.form.line1 = `${process.env.VUE_APP_VIDEO_URL}/${data.SourceInfo.FileName}`;
-        this.form.videoUrl = `${process.env.VUE_APP_VIDEO_URL}/${data.SourceInfo.FileName}`;
+        form.line2 = `${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.line1 };
+        this.$message.success('线路二上传成功');
+        return { success: true, url: form.line2 };
 
       } catch (error) {
-        // this.updateUploadProgress('line2Status', 'failed');
-        this.$message.error('上传失败');
+        this.updateUploadProgress('line2Status', 'failed');
+        this.$message.error('线路二上传失败');
         return { success: false, error: error?.message || 'upload failed' };
       }
     },
@@ -1415,40 +1448,38 @@ export default {
       this.form.tempId = Math.random().toString(36).substring(2, 15);
       const file = options.file;
       this.getMediaDuration(file);
-      this.currentUploadProgress = 0;
+      this.currentUploadProgress = { total: 0, line1: 0, line2: 0, line1Status: 'pending', line2Status: 'pending' };
 
       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)
-        // ]);
-
-        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('、')} 上传失败，请重试`);
-        // }
+        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('、')} 上传失败，请重试`);
+        }
         this.form.fileName = file.name;
         this.form.fileSize = file.size;
       } catch (error) {
@@ -1560,7 +1591,8 @@ export default {
       }
 
       // 检查是否所有选中的视频都已上传完成
-      const incompleteVideos = this.videoList.filter(item => (item.uploadDetails.line1 || 0) < 100);
+      console.log("videoList",this.videoList)
+      const incompleteVideos = this.videoList.filter(item => (item.progress || 0) < 100);
       if (incompleteVideos.length > 0) {
         this.$message.warning('有未完成上传的视频，请先完成上传');
         return;
@@ -1842,6 +1874,7 @@ export default {
       this.isProcessingBatch = false;
       this.isUploading = false;
       this.$message.success('所有视频上传队列处理完成！');
+      console.log("批量上传form",this.form)
     },
 
     async uploadSingleVideo(tempVideo) {
@@ -1850,29 +1883,35 @@ 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 (res.success) {
-            this.videoList[index].uploadStatus = 'success'
+          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;
           } else {
-            this.videoList[index].uploadStatus = 'failed'
+            this.videoList[index].uploadStatus = 'failed';
+            this.videoList[index].uploadDetails.line1Status = line1Success ? 'success' : 'failed';
+            this.videoList[index].uploadDetails.line2Status = line2Success ? 'success' : 'failed';
+            this.updateBatchProgress(index);
           }
         }
 
-        return { success: res.success, tempVideo };
+        return { success: line1Success && line2Success, tempVideo };
       } catch (error) {
         const index = this.videoList.findIndex(item => item.tempId === tempVideo.tempId);
         if (index !== -1) {
@@ -2197,27 +2236,23 @@ export default {
     async uploadVideoToHSYBatch(file, tempVideo) {
       try {
         const data = await uploadToHSY(file, (progress) => {
-          const progressPercent = progress.percent;
+          const progressPercent = Math.floor(progress);
           const index = this.videoList.findIndex(item => item.tempId === tempVideo.tempId);
           if (index !== -1) {
-            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
+            this.videoList[index].uploadDetails.line2 = progressPercent;
+            this.videoList[index].uploadDetails.line2Status = 'uploading';
+            this.updateBatchProgress(index);
           }
         }, 1, (uploadInfo) => {
           const tokens = this.uploadCancellationTokens.get(tempVideo.tempId) || {};
           tokens.obs = uploadInfo.cancel;
           this.uploadCancellationTokens.set(tempVideo.tempId, tokens);
         });
-        tempVideo.line1 = `${process.env.VUE_APP_VIDEO_URL}/${data.SourceInfo.FileName}`;
-        tempVideo.videoUrl = `${process.env.VUE_APP_VIDEO_URL}/${data.SourceInfo.FileName}`;
+        console.log("批量上传返回参数",data)
+        tempVideo.line2 = `${process.env.VUE_APP_VIDEO_URL}/${data.SourceInfo.FileName}`;
         tempVideo.hsyVid = data.Vid;
 
-        return { success: true, url: tempVideo.line1};
+        return { success: true, url: tempVideo.line2};
       } catch (error) {
         return { success: false, error: error.message };
       }
@@ -2474,12 +2509,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 undefined;
+      return '';
     },
   }
 }