|
@@ -1,12 +1,5 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <el-form-item label="上传类型" >
|
|
|
- <el-radio-group v-model="localUploadType">
|
|
|
- <el-radio :label="2" >线路一</el-radio>
|
|
|
- <el-radio :label="1" >线路二</el-radio>
|
|
|
-<!-- <el-radio :label="3" >线路三</el-radio>-->
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
<el-form-item label="视频上传">
|
|
|
<div class="upload_video" id="upload_video">
|
|
|
<el-upload
|
|
@@ -21,21 +14,52 @@
|
|
|
:auto-upload="false"
|
|
|
:key="uploadKey"
|
|
|
>
|
|
|
- <el-button slot="trigger" size="small" type="primary">选取视频</el-button>
|
|
|
+ <el-button slot="trigger" size="small" type="primary" >选取视频</el-button>
|
|
|
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">点击上传</el-button>
|
|
|
- <el-progress style="margin-top: 10px;" class="progress" :text-inside="true" :stroke-width="18" :percentage="progress" status="success"></el-progress>
|
|
|
+<!-- <el-progress style="margin-top: 10px;" :key="'线路一'" class="progress" :text-inside="true" :stroke-width="18" :percentage="txProgress" status="success"></el-progress>-->
|
|
|
+<!-- <el-progress style="margin-top: 10px;" :key="'线路二'" class="progress" :text-inside="true" :stroke-width="18" :percentage="hwProgress" status="success"></el-progress>-->
|
|
|
+ <!-- 线路一 -->
|
|
|
+ <div class="progress-container">
|
|
|
+ <span class="progress-label">线路一</span>
|
|
|
+ <el-progress
|
|
|
+ style="margin-top: 5px;"
|
|
|
+ class="progress"
|
|
|
+ :text-inside="true"
|
|
|
+ :stroke-width="18"
|
|
|
+ :percentage="txProgress"
|
|
|
+ status="success">
|
|
|
+ </el-progress>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 线路二 -->
|
|
|
+ <div class="progress-container">
|
|
|
+ <span class="progress-label">线路二</span>
|
|
|
+ <el-progress
|
|
|
+ style="margin-top: 5px;"
|
|
|
+ class="progress"
|
|
|
+ :text-inside="true"
|
|
|
+ :stroke-width="18"
|
|
|
+ :percentage="hwProgress"
|
|
|
+ status="success">
|
|
|
+ </el-progress>
|
|
|
+ </div>
|
|
|
<div slot="tip" class="el-upload__tip">只能上传mp4文件,且不超过500M</div>
|
|
|
</el-upload>
|
|
|
- <video v-if="videoUrl" ref="myvideo" :src="videoUrl" id="video" width="100%" height="300px" controls></video>
|
|
|
- <!-- <canvas id="mycanvas" style="display:none"></canvas> -->
|
|
|
- <div v-if="fileName">视频文件名: {{ fileName }}</div>
|
|
|
- <div v-if="fileKey">文件Key: {{ fileKey }}</div>
|
|
|
- <div v-if="fileSize">文件大小(MB): {{ (fileSize / (1024 * 1024)).toFixed(2) }} MB</div>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
- <!-- <el-form-item label="视频封面">
|
|
|
-
|
|
|
- </el-form-item> -->
|
|
|
+ <el-form-item label="视频播放">
|
|
|
+ <video v-if="videoUrl" ref="myvideo" :src="videoUrl" id="video" width="100%" height="300px" controls></video>
|
|
|
+ <div v-if="fileName">视频文件名: {{ fileName }}</div>
|
|
|
+ <div v-if="fileKey">文件Key: {{ fileKey }}</div>
|
|
|
+ <div v-if="fileSize">文件大小(MB): {{ (fileSize / (1024 * 1024)).toFixed(2) }} MB</div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="播放线路" >
|
|
|
+ <el-radio-group v-model="localUploadType">
|
|
|
+ <el-radio :label="1" >线路一</el-radio>
|
|
|
+ <el-radio :label="2" >线路二</el-radio>
|
|
|
+ <!-- <el-radio :label="3" >线路三</el-radio>-->
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -101,15 +125,14 @@ export default {
|
|
|
duration: 0,
|
|
|
fileId: "",
|
|
|
uploadTypeOptions: [
|
|
|
- { dictLabel: "线路一", dictValue: 2 }, //腾讯pcdn
|
|
|
-
|
|
|
- { dictLabel: "线路二", dictValue: 1 }, //电信
|
|
|
- // { dictLabel: "线路三", dictValue: 3 }, //华为云obs
|
|
|
+ { dictLabel: "线路一", dictValue: 1 }, //腾讯pcdn
|
|
|
+ { dictLabel: "线路二", dictValue: 2 }, //华为云obs
|
|
|
// { dictLabel: "华为云VOD", dictValue: 4 },
|
|
|
// { dictLabel: "腾讯云VOD", dictValue: 5 },
|
|
|
],
|
|
|
fileList: [],
|
|
|
- progress: 0,
|
|
|
+ txProgress: 0,
|
|
|
+ hwProgress: 0,
|
|
|
uploadLoading: false,
|
|
|
uploadKey: 0,
|
|
|
// thumbnail: '',
|
|
@@ -147,18 +170,13 @@ export default {
|
|
|
if (this.fileList.length < 1) {
|
|
|
return this.$message.error("请先选取视频,再进行上传");
|
|
|
}
|
|
|
- if (this.localUploadType == null) {
|
|
|
- return this.$message.error("请先选择上传类型,再进行上传");
|
|
|
- }
|
|
|
- this.getFirstThumbnail();
|
|
|
- if (this.localUploadType == 1 || this.localUploadType == 2) {
|
|
|
- // 腾讯云PCDN 上传逻辑
|
|
|
- this.uploadVideoToTxPcdn();
|
|
|
- } else if (this.localUploadType == 3) {
|
|
|
- this.uploadVideoToHwObs();
|
|
|
- }
|
|
|
+ await this.getFirstThumbnail();
|
|
|
+ //同时上传个线路
|
|
|
+ await this.uploadVideoToTxPcdn();
|
|
|
+ await this.uploadVideoToHwObs();
|
|
|
this.$emit("update:fileName", this.fileList[0].name);
|
|
|
},
|
|
|
+ //获取第一帧封面
|
|
|
async getFirstThumbnail(){
|
|
|
const file = this.fileList[0].raw;
|
|
|
getThumbnail(file).then(response => {
|
|
@@ -166,25 +184,27 @@ export default {
|
|
|
this.$emit("update:thumbnail", response.url);
|
|
|
})
|
|
|
},
|
|
|
+ //更新华为线路进度条
|
|
|
updateHwProgress(progress) {
|
|
|
- this.progress = progress;
|
|
|
+ this.hwProgress = progress;
|
|
|
},
|
|
|
+ //更新腾讯线路进度条
|
|
|
updateTxProgress(progressData) {
|
|
|
- this.progress = Math.round(progressData.percent * 100);
|
|
|
+ this.txProgress = Math.round(progressData.percent * 100);
|
|
|
},
|
|
|
+ //上传腾讯云Pcdn
|
|
|
async uploadVideoToTxPcdn() {
|
|
|
try {
|
|
|
const file = this.fileList[0].raw;
|
|
|
- // const type = 2;
|
|
|
const data = await uploadObject(file, this.updateTxProgress,this.type);
|
|
|
console.log("腾讯COS返回========>",data);
|
|
|
console.log("isPrivate=======>",this.isPrivate)
|
|
|
let line_1='' ;
|
|
|
- let line_2 ='';
|
|
|
-
|
|
|
- line_1 = `https://zzftcpv.ylrzcloud.com${data.urlPath}`;
|
|
|
- line_2 = `https://zzfctev.ylrzcloud.com${data.urlPath}`;
|
|
|
-
|
|
|
+ if (this.isPrivate===0){
|
|
|
+ line_1 = `https://tcpv.ylrzcloud.com${data.urlPath}`;
|
|
|
+ }else {
|
|
|
+ line_1 = `https://blytcpv.ylrzcloud.com${data.urlPath}`;
|
|
|
+ }
|
|
|
|
|
|
let urlPathWithoutFirstSlash = data.urlPath.substring(1);
|
|
|
this.$emit("update:fileKey", urlPathWithoutFirstSlash);
|
|
@@ -193,31 +213,54 @@ export default {
|
|
|
console.log("组装URL========>",line_1);
|
|
|
this.$emit("update:videoUrl", line_1);
|
|
|
this.$emit("update:line_1", line_1);
|
|
|
- this.$emit("update:line_2", line_2);
|
|
|
- this.$message.success("视频上传成功");
|
|
|
+ // this.$emit("update:line_2", line_2);
|
|
|
+ this.$message.success("线路一上传成功");
|
|
|
} catch (error) {
|
|
|
- this.$message.error("上传失败");
|
|
|
+ this.$message.error("线路一上传失败");
|
|
|
}
|
|
|
},
|
|
|
+ //上传华为云Obs
|
|
|
async uploadVideoToHwObs() {
|
|
|
try {
|
|
|
const file = this.fileList[0].raw;
|
|
|
const data = await uploadToOBS(file, this.updateHwProgress,this.type);
|
|
|
- this.$emit("update:videoUrl", data);
|
|
|
- this.$emit("update:line_3", data);
|
|
|
- this.$message.success("视频上传成功");
|
|
|
+ console.log("华为OBS返回========>",data);
|
|
|
+ let line_2='' ;
|
|
|
+ if (this.isPrivate===0){
|
|
|
+ line_2 = `https://obs.ylrztop.com/${data.urlPath}`;
|
|
|
+ }else {
|
|
|
+ line_2 = `https://blyobs.ylrztop.com/${data.urlPath}`;
|
|
|
+ }
|
|
|
+ // this.$emit("update:videoUrl", data);
|
|
|
+ this.$emit("update:line_2", line_2);
|
|
|
+ this.$message.success("线路二上传成功");
|
|
|
} catch (error) {
|
|
|
- this.$message.error("上传失败");
|
|
|
+ this.$message.error("线路二上传失败");
|
|
|
}
|
|
|
},
|
|
|
handleRemove(file, fileList) {
|
|
|
console.log(file, fileList.length);
|
|
|
},
|
|
|
resetUpload() {
|
|
|
- this.progress = 0;
|
|
|
+ this.txProgress = 0;
|
|
|
+ this.hwProgress=0;
|
|
|
this.fileList = [];
|
|
|
this.uploadKey++;
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.progress-container {
|
|
|
+ margin-bottom: 5px; /* 进度条之间的间距 */
|
|
|
+}
|
|
|
+
|
|
|
+.progress-label {
|
|
|
+ display: block;
|
|
|
+ //margin-bottom: 5px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #303331; /* 标签颜色,可以根据需要调整 */
|
|
|
+}
|
|
|
+</style>
|