Browse Source

上传视频地址修改

yuhongqi 6 days ago
parent
commit
8d7caede31

+ 1 - 1
.env.development

@@ -12,7 +12,7 @@ VUE_APP_COS_BUCKET = fs-1319721001
 # 存储桶配置
 VUE_APP_COS_REGION = ap-chongqing
 # 线路一地址
-VUE_APP_VIDEO_LINE_1 = https://fs-1319721001.cos.ap-chongqing.myqcloud.com
+VUE_APP_VIDEO_LINE_1 = https://cos.his.cdwjyyh.com
 # 线路二地址
 VUE_APP_VIDEO_LINE_2 = https://zkzhobs.ylrztop.com
 

+ 1 - 1
.env.production

@@ -10,7 +10,7 @@ VUE_APP_COS_BUCKET = fs-1319721001
 # 存储桶配置
 VUE_APP_COS_REGION = ap-chongqing
 # 线路一地址
-VUE_APP_VIDEO_LINE_1 = https://fs-1319721001.cos.ap-chongqing.myqcloud.com
+VUE_APP_VIDEO_LINE_1 = https://cos.his.cdwjyyh.com
 # 线路二地址
 VUE_APP_VIDEO_LINE_2 = https://zkzhobs.ylrztop.com
 

+ 18 - 1
src/components/LiveVideoUpload/index.vue

@@ -40,7 +40,7 @@
           <!--              status="success">-->
           <!--            </el-progress>-->
           <!--          </div>-->
-          <div slot="tip" class="el-upload__tip">只能上传mp4文件,且不超过500M</div>
+          <div slot="tip" class="el-upload__tip">只能上传mp4文件,且不超过800M</div>
         </el-upload>
       </div>
     </el-form-item>
@@ -164,6 +164,14 @@ export default {
       // 重置其他状态...
     },
     handleChange(file, fileList) {
+      const MAX_SIZE = 800 * 1024 * 1024;
+      if (file.raw && file.raw.size > MAX_SIZE) {
+        this.$message.error("文件大小不能超过800M");
+        this.$refs.upload.clearFiles();
+        this.fileList = [];
+        this.$emit("update:fileSize", null);
+        return;
+      }
       this.fileList = fileList;
       this.getVideoDuration(file.raw);
     },
@@ -184,6 +192,10 @@ export default {
       if (this.fileList.length < 1) {
         return this.$message.error("请先选取视频,再进行上传");
       }
+      const MAX_SIZE = 800 * 1024 * 1024;
+      if (this.fileList[0].raw && this.fileList[0].raw.size > MAX_SIZE) {
+        return this.$message.error("文件大小不能超过800M");
+      }
       //同时上传个线路
       await this.uploadVideoToTxPcdn();
       // await this.uploadVideoToHwObs();
@@ -209,6 +221,11 @@ export default {
     async uploadVideoToTxPcdn() {
       try {
         const file = this.fileList[0].raw;
+        const MAX_SIZE = 800 * 1024 * 1024;
+        if (file && file.size > MAX_SIZE) {
+          this.$message.error("文件大小不能超过800M");
+          return;
+        }
         const data = await uploadObject(file, this.updateTxProgress, this.type);
         console.log("腾讯COS返回========>", data);
         console.log("isPrivate=======>", this.isPrivate)

+ 18 - 1
src/components/VideoUpload/index.vue

@@ -43,7 +43,7 @@
 <!--              status="success">-->
 <!--            </el-progress>-->
 <!--          </div>-->
-          <div slot="tip" class="el-upload__tip">只能上传mp4文件,且不超过500M</div>
+          <div slot="tip" class="el-upload__tip">只能上传mp4文件,且不超过800M</div>
 <!--        </el-upload>-->
       </div>
     </el-form-item>
@@ -271,6 +271,14 @@ export default {
       this.getList();
     },
     handleChange(file, fileList) {
+      const MAX_SIZE = 800 * 1024 * 1024;
+      if (file.raw && file.raw.size > MAX_SIZE) {
+        this.$message.error("文件大小不能超过800M");
+        this.$refs.upload?.clearFiles();
+        this.fileList = [];
+        this.$emit("update:fileSize", null);
+        return;
+      }
       this.fileList = fileList;
       this.getVideoDuration(file.raw);
     },
@@ -291,6 +299,10 @@ export default {
       if (this.fileList.length < 1) {
         return this.$message.error("请先选取视频,再进行上传");
       }
+      const MAX_SIZE = 800 * 1024 * 1024;
+      if (this.fileList[0].raw && this.fileList[0].raw.size > MAX_SIZE) {
+        return this.$message.error("文件大小不能超过800M");
+      }
       //同时上传个线路
       await this.uploadVideoToTxPcdn();
       this.$emit("update:fileName", this.fileList[0].name);
@@ -315,6 +327,11 @@ export default {
     async uploadVideoToTxPcdn() {
       try {
         const file = this.fileList[0].raw;
+        const MAX_SIZE = 800 * 1024 * 1024;
+        if (file && file.size > MAX_SIZE) {
+          this.$message.error("文件大小不能超过800M");
+          return;
+        }
         const data = await uploadObject(file, this.updateTxProgress,this.type);
         console.log("腾讯COS返回========>",data);
         console.log("isPrivate=======>",this.isPrivate)

+ 77 - 10
src/views/live/liveVideo/index.vue

@@ -11,12 +11,20 @@
         />
       </el-form-item>
       <el-form-item label="分类" prop="category">
-        <el-input
+        <el-select
           v-model="queryParams.category"
-          placeholder="请输入分类"
+          placeholder="请选择分类"
           clearable
-          @keyup.enter.native="handleQuery"
-        />
+          filterable
+          style="width: 200px"
+        >
+          <el-option
+            v-for="item in categoryOptions"
+            :key="item.dictValue"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="备注" prop="remark">
         <el-input
@@ -87,7 +95,7 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="编号" align="center" prop="videoId" />
       <el-table-column label="视频名称" align="center" prop="videoName" />
-      <el-table-column label="分类" align="center" prop="category" />
+      <el-table-column label="分类" align="center" prop="category" :formatter="categoryFormatter" />
       <el-table-column label="排序" align="center" prop="sort" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="视频地址" align="center" prop="videoUrl">
@@ -101,6 +109,11 @@
           ></video>
         </template>
       </el-table-column>
+      <el-table-column label="文件大小" align="center">
+        <template slot-scope="scope">
+          <span>{{ formatFileSize(scope.row.fileSize) }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="时长" align="center" prop="duration" :formatter="formatDuration"/>
       <el-table-column label="转码状态" align="center" prop="finishStatus">
         <template slot-scope="scope">
@@ -159,7 +172,19 @@
           <el-input v-model="form.videoName" placeholder="请输入视频名称" />
         </el-form-item>
         <el-form-item label="分类" prop="category">
-          <el-input v-model="form.category" placeholder="请输入分类" />
+          <el-select
+            v-model="form.category"
+            placeholder="请选择分类"
+            filterable
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in categoryOptions"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            />
+          </el-select>
         </el-form-item>
         <el-form-item label="排序" prop="sort">
           <el-input-number v-model="form.sort" :min="0" placeholder="请输入排序号" />
@@ -207,7 +232,19 @@
           <el-input v-model="editVideoInfoForm.videoName" placeholder="请输入视频名称" />
         </el-form-item>
         <el-form-item label="分类" prop="category">
-          <el-input v-model="editVideoInfoForm.category" placeholder="请输入分类" />
+          <el-select
+            v-model="editVideoInfoForm.category"
+            placeholder="请选择分类"
+            filterable
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in categoryOptions"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            />
+          </el-select>
         </el-form-item>
         <el-form-item label="排序" prop="sort">
           <el-input-number v-model="editVideoInfoForm.sort" :min="0" placeholder="请输入排序号" />
@@ -228,6 +265,7 @@
         <el-form-item label="视频名称">
           <el-input v-model="editCompanyIdsForm.videoName" :disabled="true" />
         </el-form-item>
+
         <el-form-item label="公司列表" prop="companyIds">
           <div style="margin-bottom: 10px;">
             <el-button size="mini" type="text" @click="selectAllCompaniesForEdit">全选</el-button>
@@ -265,7 +303,19 @@
     <el-dialog title="批量修改分类" :visible.sync="batchUpdateCategoryDialog" width="500px" append-to-body>
       <el-form ref="batchUpdateCategoryForm" :model="batchUpdateCategoryForm" label-width="100px">
         <el-form-item label="分类" prop="category">
-          <el-input v-model="batchUpdateCategoryForm.category" placeholder="请输入分类" />
+          <el-select
+            v-model="batchUpdateCategoryForm.category"
+            placeholder="请选择分类"
+            filterable
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in categoryOptions"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            />
+          </el-select>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -288,6 +338,7 @@ export default {
     return {
       //字典
       videoTypeOptions: [],
+      categoryOptions: [],
       // 遮罩层
       loading: true,
       // 导出遮罩层
@@ -326,10 +377,14 @@ export default {
         uploadType: 1,
         isTranscode:0,
         transcodeFileKey:null,
-        companyIds: []
+        companyIds: [],
+        fileSize: null
       },
       // 表单校验
       rules: {
+        category: [
+          { required: true, message: "分类不能为空", trigger: "change" }
+        ]
       },
       isPrivate:null,
       // 是否显示修改视频信息对话框
@@ -365,11 +420,17 @@ export default {
   created() {
     this.getList();
     this.getAllCompanyOptions();
+    this.getDicts("sys_live_video_category").then(response => {
+      this.categoryOptions = response.data;
+    });
   },
   mounted() {
     this.getAllCompanyOptions();
   },
   methods: {
+    categoryFormatter(row, column) {
+      return this.selectDictLabel(this.categoryOptions, row.category);
+    },
     handleVideoDuration(duration) {
       this.form.duration = duration;
     },
@@ -392,6 +453,11 @@ export default {
         ? `${h}:${format(m)}:${format(s)}`
         : `${format(m)}:${format(s)}`;
     },
+    formatFileSize(size) {
+      if (!size) return "--";
+      const mb = size / (1024 * 1024);
+      return `${mb.toFixed(2)} MB`;
+    },
     /** 查询直播视频列表 */
     getList() {
       this.loading = true;
@@ -430,7 +496,8 @@ export default {
         uploadType: 1,
         isTranscode: 0,
         transcodeFileKey: null,
-        companyIds: []
+        companyIds: [],
+        fileSize: null
       };
       this.resetForm("form");
     },