新增视频上传限制,图片上传限制,修正上架提示BUG

src/api/teachingVideo/index.js

@@ -59,7 +59,6 @@ export function uploadCover(data, fn) {
 }
 
 export function changeUserStatus(id, shelfStatus) {
-  console.log(shelfStatus);
   if (shelfStatus != 0) {
     return request({
       url: 'pc/teachingVideo/info/offShelf/' + id,

src/views/teachingVideo/info/index.vue

@@ -40,7 +40,9 @@
 
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button v-if="pid!=0" type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
+            <el-button v-if="pid != 0" type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:user:add']"
+              >新增</el-button
+            >
           </el-col>
           <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
         </el-row>
@@ -54,9 +56,14 @@
               <video :src="scope.row.fileUrl" class="videoPreview" :poster="scope.row.coverFileUrl" controls preload="meta"></video>
             </template>
           </el-table-column>
-          <el-table-column label="视频时长" align="center" prop="videoDuration" >
+          <el-table-column label="视频封面" align="center" width="300px">
             <template slot-scope="scope">
-              <span>{{new Date(scope.row.videoDuration*1000).toISOString().slice(11,19)}}</span>
+              <img :src="scope.row.coverFileUrl" class="imgPreview" />
+            </template>
+          </el-table-column>
+          <el-table-column label="视频时长" align="center" prop="videoDuration">
+            <template slot-scope="scope">
+              <span>{{ new Date(scope.row.videoDuration * 1000).toISOString().slice(11, 19) }}</span>
             </template>
           </el-table-column>
           <el-table-column label="视频分类" align="center" prop="teachingVideoTypeName" :show-overflow-tooltip="true" />
@@ -117,7 +124,7 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="视频文件">
-              <input type="file" ref="videoFile" @change="fileUpload" />
+              <input type="file" accept="video/*" ref="videoFile" @change="fileUpload" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -129,7 +136,7 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="视频封面">
-              <input type="file" ref="coverFile"  @change="coverUpload" />
+              <input type="file" accept="image/*" ref="coverFile" @change="coverUpload" :disabled="form.vodVideoFileId == null" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -148,7 +155,7 @@
 </template>
 
 <script>
-import { listUser, getUser, delUser, addUser, updateUser,  changeUserStatus,  uploadCover } from '@/api/teachingVideo/index'
+import { listUser, getUser, delUser, addUser, updateUser, changeUserStatus, uploadCover } from '@/api/teachingVideo/index'
 import { treeselect } from '@/api/videoType'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
@@ -160,7 +167,7 @@ export default {
   components: { Treeselect },
   data() {
     return {
-      pid:0,
+      pid: 0,
       teachingVideoTypeId: 0,
       videoPercentage: 0,
       imagePercentage: 0,
@@ -238,7 +245,7 @@ export default {
         this.videoPercentage = Math.floor(info.percent * 100 * 100) / 100
       })
       uploader.done().then(doneResult => {
-        this.form.vodVideoFileId = doneResult.fileId
+        this.$set(this.form, 'vodVideoFileId', doneResult.fileId)
       })
     },
     //上传封面
@@ -282,7 +289,7 @@ export default {
     },
     // 用户状态修改
     handleStatusChange(row) {
-      let text = row.shelfStatus === '1' ? '上架' : '下架'
+      let text = row.shelfStatus === 0 ? '上架' : '下架'
       this.$confirm('确认要"' + text + '""' + row.title + '"视频吗?', '警告', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -408,4 +415,9 @@ export default {
   object-fit: contain;
   height: 180px;
 }
+.imgPreview {
+  object-fit: contain;
+  width: 200px;
+  height: 180px;
+}
 </style>