【ID1000403】模式管理-添加模式，文件类型限制

flossom-ui/src/views/system/mode/index.vue

@@ -229,14 +229,16 @@
           <el-upload
             class="upload-demo"
             :action="upload.url"
+            :before-upload="limitUploadFileType"
             :on-preview="handlePreview"
             :on-remove="handleRemove"
             :on-success="handleFileSuccess"
             :headers="upload.headers"
             :file-list="fileList"
+            accept=".mp4,.avi,.mov,.wmv"
           >
             <el-button size="small" type="primary">点击上传</el-button>
-            <div slot="tip" class="el-upload__tip">只能上传视频文件，且不超过50M</div>
+            <div slot="tip" class="el-upload__tip">只能上传视频文件(mp4，avi，mov，wmv格式)，且不超过50M</div>
           </el-upload>
         </el-form-item>
         <el-form-item v-if="form.instrumentType == 2" label="弹出视频窗" prop="openSource"  label-width="100px">
@@ -723,6 +725,23 @@ export default {
     handlePreview(file) {
       console.log(file);
     },
+    limitUploadFileType(file) {
+      const type = ['video/mp4','video/avi','video/mov','video/rmvb','video/rm','video/flv','video/3gp']
+      const isVideo = type.includes(file.type)
+      // 检验文件格式
+      if (!isVideo) {
+        this.$message.error(`视频格式错误!`)
+        return false
+      }
+      // 校检文件大小
+      const fileSize = 50;
+      const isLt = file.size / 1024 / 1024 < fileSize
+      if (!isLt) {
+        this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`)
+        return false
+      }
+      return true
+    },
     // 文件上传成功处理
     handleFileSuccess(response, file, fileList, item) {
       console.log('上传后的结果==>',JSON.stringify(response))