资料库视频上传添加封面

src/views/normal/material/video/index.vue

@@ -53,7 +53,7 @@
             <el-popover placement="top-start" title="审核说明" width="400" trigger="hover" :content="row.invalidReason">
               <el-tag slot="reference" size="small" type="danger" class="reason">
                 <span>审核未通过</span>
-                <span class="el-icon-question status danger " />
+                <span class="el-icon-question status danger" />
               </el-tag>
             </el-popover>
             <!-- 未通过原因展示END -->
@@ -65,17 +65,17 @@
           <!-- 只有审核通过了才能操作上下线 auditStatus ：审核状态 -->
           <template v-if="row.auditStatus === 1">
             <template v-if="row.status === 0">
-              <span style="margin-right:10px;" class="status danger">已下线</span>
+              <span style="margin-right: 10px" class="status danger">已下线</span>
               <permission-button type="primary" size="mini" @click="handleChangeStatus(row)">上线</permission-button>
             </template>
             <template v-else>
-              <span style="margin-right:10px;" class="status success ">已上线</span>
+              <span style="margin-right: 10px" class="status success">已上线</span>
               <permission-button type="info" size="mini" plain @click="handleChangeStatus(row)">下线</permission-button>
             </template>
           </template>
           <template v-else>
             <!-- <el-tag type="warning">待上线</el-tag> -->
-            <span style="margin-right:10px;" class="status warning">待上线</span>
+            <span style="margin-right: 10px" class="status warning">待上线</span>
           </template>
         </template>
       </el-table-column>
@@ -89,19 +89,19 @@
           <permission-button
             type="primary"
             size="mini"
-            style="margin-right:12px"
+            style="margin-right: 12px"
             @click="handlePlayer(row)"
           >播放</permission-button>
           <permission-button
             type="primary"
             size="mini"
-            style="margin-right:12px"
+            style="margin-right: 12px"
             @click="handleShowDialog('edit', row)"
           >编辑</permission-button>
           <permission-button
             type="danger"
             size="mini"
-            style="margin-right:12px"
+            style="margin-right: 12px"
             @click="handleRemoveVideo(row)"
           >删除</permission-button>
         </template>
@@ -128,8 +128,18 @@
         <el-form-item label="标题：" prop="videoTitle">
           <el-input v-model="dialogData.videoTitle" maxlength="50" show-word-limit />
         </el-form-item>
+        <el-form-item label="视频封面" prop="videoImage">
+          <!-- 216 * 132 -->
+          <upload-image
+            tip="建议尺寸比例：432px * 264px"
+            :image-list="videoImageList"
+            @success="handleUploadImageSussces"
+            @remove="handleRemoveImage"
+          />
+          <el-input v-show="false" v-model="dialogData.videoImage" />
+        </el-form-item>
         <el-form-item ref="formVideoUrlRef" label="上传视频：" prop="videoPreviewUrl">
-          <div class="file-upload-box" style="height:40px;">
+          <div class="file-upload-box" style="height: 40px">
             <!-- 上传文件组件 -->
             <el-upload
               ref="uploadRef"
@@ -144,11 +154,11 @@
               :before-upload="beforeUpload"
               :file-list="fileList"
             >
-              <permission-button size="mini" type="primary" style="width:100%">上传视频</permission-button>
+              <permission-button size="mini" type="primary" style="width: 100%">上传视频</permission-button>
             </el-upload>
             <el-input v-model="dialogData.videoPreviewUrl" type="hidden" class="hiddenInput" />
           </div>
-          <span style="color:#999;font-size:12px">视频大小不能超过<i style="color:red">*500MB*</i></span>
+          <span style="color: #999; font-size: 12px">视频大小不能超过<i style="color: red">*500MB*</i></span>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -160,9 +170,7 @@
 
     <!-- 视频预览对话框 -->
     <el-dialog title="视频预览" :visible.sync="dialogPreviewVisible" width="60%" @closed="dialogPreviewColosed">
-      <video :src="videoPreviewUrl" controls="controls" width="100%">
-        您的浏览器不支持播放该视频
-      </video>
+      <video :src="videoPreviewUrl" controls="controls" width="100%">您的浏览器不支持播放该视频</video>
       <div slot="footer" class="dialog-footer">
         <permission-button type="primary" @click="dialogPreviewVisible = false">关闭</permission-button>
       </div>
@@ -173,12 +181,13 @@
 
 <script>
 import PermissionButton from '@/views/components/PermissionButton'
+import UploadImage from '@/components/UploadImage'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import { mapGetters } from 'vuex'
 import { getToken } from '@/utils/auth'
 import { changeVideoStatus, getVideoList, removeVideo, saveVideo } from '@/api/doc'
 export default {
-  components: { Pagination, PermissionButton },
+  components: { Pagination, PermissionButton, UploadImage },
   data() {
     return {
       dialogPreviewVisible: false,
@@ -209,15 +218,19 @@ export default {
         videoTitle: '',
         // videoUrl: '',
         videoPreviewUrl: '',
-        videoDownloadUrl: ''
+        videoDownloadUrl: '',
+        videoImage: ''
       },
       // dialog中表单字段校验规则
       dialogFormRules: {
         videoTitle: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
-        videoPreviewUrl: [{ required: true, message: '链接不能为空', trigger: ['change', 'blur'] }]
+        videoPreviewUrl: [{ required: true, message: '链接不能为空', trigger: ['change', 'blur'] }],
+        videoImage: [{ required: true, message: '视频封面不能为空', trigger: ['change'] }]
       },
       list: [],
-      videoPreviewUrl: ''
+      videoPreviewUrl: '',
+      // 视频封面
+      videoImageList: []
     }
   },
   computed: {
@@ -251,7 +264,7 @@ export default {
       this.listLoading = true
       this.listQuery.authUserId = this.authUserId
       getVideoList(this.listQuery)
-        .then(res => {
+        .then((res) => {
           if (res.code !== 0) return
           this.list = res.data.list
           this.total = res.data.total
@@ -269,7 +282,7 @@ export default {
         return
       }
       // 对标题字段进行规则校验
-      this.$refs.formRef.validateField('videoTitle', error => {
+      this.$refs.formRef.validateField('videoTitle', (error) => {
         if (!error) {
           /**
            * 新增视频和修改视频
@@ -292,7 +305,7 @@ export default {
     },
     // 保存视频
     save() {
-      this.$refs.formRef.validate(valide => {
+      this.$refs.formRef.validate((valide) => {
         if (!valide) return
         this.dialogData.authUserId = this.authUserId
         // uploadVideoUrl不为空，就代表重新上传了视频，需要为表单中的videoUrl重新赋值，新增时该值也不为空
@@ -301,7 +314,7 @@ export default {
           this.dialogData.videoDownloadUrl = this.downloadUrl
         }
         saveVideo(this.dialogData)
-          .then(res => {
+          .then((res) => {
             console.log(res)
             if (res.code !== 0) return
             this.dialogVisible = false
@@ -327,9 +340,12 @@ export default {
         }
       }
       if (this.dialogData.videoPreviewUrl) {
-        this.fileList.push({ name: row.videoName, url: row.videoPreviewUrl })
+        this.fileList = [{ name: row.videoName, url: row.videoPreviewUrl }]
         this.hasVideo = true
       }
+      if (this.dialogData.videoImage) {
+        this.videoImageList = [{ name: '视频封面', url: row.videoImage }]
+      }
     },
     // 删除视频
     async handleRemoveVideo(row) {
@@ -341,7 +357,7 @@ export default {
         this.$message.info('已取消操作')
       })
       if (text !== 'confirm') return
-      removeVideo({ videoId: row.videoId }).then(res => {
+      removeVideo({ videoId: row.videoId }).then((res) => {
         if (res.code !== 0) return
         this.$message.success(res.data)
         this.getList()
@@ -356,12 +372,14 @@ export default {
     // 对话框关闭的回调
     dialogColosed() {
       this.fileList = []
+      this.videoImageList = []
       this.hasVideo = false
       this.dialogData.videoId = ''
       this.dialogData.authUserId = ''
       this.dialogData.videoTitle = ''
       this.dialogData.videoPreviewUrl = ''
       this.dialogData.videoDownloadUrl = ''
+      this.dialogData.videoImage = ''
       this.chooseNewVideo = false
       this.downloadUrl = ''
       this.previewUrl = ''
@@ -419,7 +437,7 @@ export default {
         status: item.status === 1 ? 0 : 1
       }
       changeVideoStatus(params)
-        .then(res => {
+        .then((res) => {
           // this.$message.success(res.data)
           this.$message({
             message: res.data,
@@ -428,13 +446,24 @@ export default {
           })
           this.getList()
         })
-        .catch(err => {
+        .catch((err) => {
           console.log(err)
         })
         .finally(() => {
           this.listLoading = false
         })
     },
+
+    // 封面图片上传成功
+    handleUploadImageSussces({ response, file, fileList }) {
+      this.videoImageList = fileList
+      this.dialogData.videoImage = response.data
+    },
+    handleRemoveImage({ response, file, fileList }) {
+      this.videoImageList = fileList
+      this.dialogData.videoImage = ''
+    },
+
     indexMethod(index) {
       return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
     }