新增视频及封面文件限制

src/views/shortVideo/index.vue

@@ -111,7 +111,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">
@@ -128,7 +128,7 @@
         <el-row v-if="form.vodVideoFileId">
           <el-col :span="12">
             <el-form-item label="视频封面">
-              <input type="file" ref="coverFile" @change="coverUpload" />
+              <input type="file" accept="image/*" ref="coverFile" @change="coverUpload" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -196,25 +196,25 @@ export default {
       form: {},
       defaultProps: {
         children: 'children',
-        label: 'typeName',
+        label: 'typeName'
       },
       // 查询参数
       queryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 10
       },
       // 表单校验
       rules: {
-        userName: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
-      },
+        userName: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }]
+      }
     }
   },
   async created() {
     this.tcVod = new TcVod({
-      getSignature: vodSignature,
+      getSignature: vodSignature
     })
     this.getList()
-    this.getDicts('sys_normal_disable').then((response) => {
+    this.getDicts('sys_normal_disable').then(response => {
       this.statusOptions = response.data
     })
   },
@@ -240,23 +240,27 @@ export default {
       }
       this.videoPercentage = 0
       const uploader = this.tcVod.upload({
-        mediaFile: this.mediaFile, // 媒体文件（视频或音频或图片），类型为 File
+        mediaFile: this.mediaFile // 媒体文件（视频或音频或图片），类型为 File
       })
-      uploader.on('media_progress', (info) => {
+      uploader.on('media_progress', info => {
         this.videoPercentage = Math.floor(info.percent * 100 * 100) / 100
       })
-      uploader.done().then((doneResult) => {
+      uploader.done().then(doneResult => {
         this.$set(this.form, 'vodVideoFileId', doneResult.fileId)
       })
     },
     //上传封面
     async coverUpload(e) {
       this.coverFile = e.target.files[0]
+      if (!this.coverFile.type.includes('image')) {
+        this.msgError('请选择图片文件')
+        return false
+      }
       this.imagePercentage = 0
       let formData = new FormData()
       formData.append('coverFile', this.coverFile)
       formData.append('fileId', this.form.vodVideoFileId)
-      const { data } = await shortVideoApi.uploadCover(formData, (e) => {
+      const { data } = await shortVideoApi.uploadCover(formData, e => {
         this.imagePercentage = Math.floor((e.loaded / e.total) * 100 * 100) / 100
       })
       this.$set(this.form, 'coverFileId', data.fileId)
@@ -268,7 +272,7 @@ export default {
         await this.$confirm(`确认要 ${text} ${row.title}吗?`, '警告', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
-          type: 'warning',
+          type: 'warning'
         })
         await shortVideoApi.changeUserStatus(row.id, row.shelfStatus)
       } catch (error) {
@@ -301,7 +305,7 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.id)
+      this.ids = selection.map(item => item.id)
       this.single = selection.length != 1
       this.multiple = !selection.length
     },
@@ -321,7 +325,7 @@ export default {
     },
     /** 提交按钮 */
     async submitForm() {
-      this.$refs['form'].validate((valid) => {
+      this.$refs['form'].validate(valid => {
         if (valid) {
           if (this.form.id != undefined) {
             const data = {
@@ -329,9 +333,9 @@ export default {
               title: this.form.title,
               videoDescribe: this.form.videoDescribe,
               videoFileId: this.form.vodVideoFileId,
-              coverFileId: this.form.coverFileId,
+              coverFileId: this.form.coverFileId
             }
-            shortVideoApi.updateVideo(data).then((response) => {
+            shortVideoApi.updateVideo(data).then(response => {
               this.msgSuccess('修改成功')
               this.open = false
               this.getList()
@@ -342,9 +346,9 @@ export default {
               title: this.form.title,
               videoDescribe: this.form.videoDescribe,
               videoFileId: this.form.vodVideoFileId,
-              coverFileId: this.form.coverFileId,
+              coverFileId: this.form.coverFileId
             }
-            shortVideoApi.addVideo(data).then((response) => {
+            shortVideoApi.addVideo(data).then(response => {
               this.msgSuccess('新增成功')
               this.open = false
               this.getList()
@@ -360,13 +364,13 @@ export default {
         await this.$confirm(`是否删除ID为${ids}的短视频`, '警告', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
-          type: 'warning',
+          type: 'warning'
         })
         await shortVideoApi.delVideo(ids)
         this.getList()
       } catch (error) {}
-    },
-  },
+    }
+  }
 }
 </script>