视频上传大小2g-4g

src/components/Upload.vue

@@ -15,31 +15,32 @@
       :file-list="fileList"
       :before-remove="beforeRemove"
       :on-remove="handleRemove"
-      :show-file-list="showList?false:true"
+      :show-file-list="showList ? false : true"
       :on-progress="uploadVideoProcess"
     >
-      <template v-if="styleType==='upload'">
+      <template v-if="styleType === 'upload'">
         <div class="upload-style">
-            <i class="el-icon-plus avatar-uploader-icon"></i>
-            <br/>
-            Upload
+          <i class="el-icon-plus avatar-uploader-icon"></i>
+          <br />
+          Upload
         </div>
       </template>
       <template v-else>
         <el-button size="mini" type="primary">
-            <svg-icon icon-class="upload"></svg-icon>
-            上传
+          <svg-icon icon-class="upload"></svg-icon>
+          上传
         </el-button>
       </template>
-      <div
-        slot="tip"
-        class="el-upload__tip"
-      >
+      <div slot="tip" class="el-upload__tip">
         {{ tips || uploadTip }}
       </div>
     </el-upload>
     <!-- <div class="zhezhao" v-loading.fullscreen.lock="fullscreenLoading"></div> -->
-    <el-progress style="width: 500px" v-if="progressFlag" :percentage="loadProgress"></el-progress>
+    <el-progress
+      style="width: 500px"
+      v-if="progressFlag"
+      :percentage="loadProgress"
+    ></el-progress>
   </div>
 </template>
 
@@ -55,7 +56,7 @@ export default {
     "fileName",
     "showList",
     "tips",
-    "styleType"
+    "styleType",
   ],
   data() {
     return {
@@ -63,7 +64,7 @@ export default {
       accept: "",
       fileTypeName: "",
       uploadName: "",
-      uploadTip:"",
+      uploadTip: "",
       loading: false,
       loadProgress: 0, // 动态显示进度条
       progressFlag: false, // 关闭进度条
@@ -109,16 +110,16 @@ export default {
   activated() {},
   // 方法集合
   methods: {
-    handleChange(file, fileList) {
-        
-    },
+    handleChange(file, fileList) {},
     uploadVideoProcess(event, file, fileList) {
-        this.progressFlag = true; // 显示进度条
-        this.loadProgress = parseInt(event.percent); // 动态获取文件上传进度
-        if (this.loadProgress >= 100) {
-            this.loadProgress = 100
-            setTimeout( () => {this.progressFlag = false}, 1000) // 一秒后关闭进度条
-        }
+      this.progressFlag = true; // 显示进度条
+      this.loadProgress = parseInt(event.percent); // 动态获取文件上传进度
+      if (this.loadProgress >= 100) {
+        this.loadProgress = 100;
+        setTimeout(() => {
+          this.progressFlag = false;
+        }, 1000); // 一秒后关闭进度条
+      }
     },
     handleSuccess(response, file, fileList) {
       if (response.status == 1) {
@@ -126,10 +127,10 @@ export default {
           ? response.file_info_list[0].media_duration
           : 10;
         this.$message.success("用户上传成功");
-        if(this.fileName){
-            this.changeFillId(fileList, this.fileName);
-        }else{
-            this.changeFillId(fileList);
+        if (this.fileName) {
+          this.changeFillId(fileList, this.fileName);
+        } else {
+          this.changeFillId(fileList);
         }
         // this.loading.close();
       } else {
@@ -139,44 +140,44 @@ export default {
       }
     },
     handlebeforeUpload(file) {
-      if (this.uploadType === 'image') {
+      if (this.uploadType === "image") {
         if (file.size > 2 * 1024 * 1024) {
-          this.$message.warning('上传图片大小不能超过2M');
+          this.$message.warning("上传图片大小不能超过2M");
           return false; // 必须返回false
         }
-      } else if (this.uploadType === 'mp4') {
-        if (file.size > 2000 * 1024 * 1024) {
-          this.$message.warning('上传视频大小不能超过2G');
+      } else if (this.uploadType === "mp4") {
+        if (file.size > 4000 * 1024 * 1024) {
+          this.$message.warning("上传视频大小不能超过4G");
           return false; // 必须返回false
         }
-      } else if (this.uploadType === 'mp3') {
+      } else if (this.uploadType === "mp3") {
         if (file.size > 20 * 1024 * 1024) {
-          this.$message.warning('上传音频大小不能超过20M');
+          this.$message.warning("上传音频大小不能超过20M");
           return false; // 必须返回false
         }
-      }else if(this.uploadType === 'video&radio'){
+      } else if (this.uploadType === "video&radio") {
         if (file.size > 500 * 1024 * 1024) {
-          this.$message.warning('上传文件大小不能超过500M');
+          this.$message.warning("上传文件大小不能超过500M");
           return false; // 必须返回false
         }
       } else if (file.size > 200 * 1024 * 1024) {
-        this.$message.warning('上传文件大小不能超过200M');
+        this.$message.warning("上传文件大小不能超过200M");
         return false; // 必须返回false
-      } else if(this.uploadType === 'txt'){
-        let index = file.name.lastIndexOf('.');
-        let names = file.name
-        let type = names.substring(index + 1).toLowerCase()
-        if(type!=='txt') {
-            this.$message.warning('请上传txt文件')
-            return false
-        } 
+      } else if (this.uploadType === "txt") {
+        let index = file.name.lastIndexOf(".");
+        let names = file.name;
+        let type = names.substring(index + 1).toLowerCase();
+        if (type !== "txt") {
+          this.$message.warning("请上传txt文件");
+          return false;
+        }
       }
-    //   this.loading = this.$loading({
-    //     lock: true,
-    //     text: "Loading",
-    //     spinner: "el-icon-loading",
-    //     background: "rgba(0, 0, 0, 0.7)",
-    //   });
+      //   this.loading = this.$loading({
+      //     lock: true,
+      //     text: "Loading",
+      //     spinner: "el-icon-loading",
+      //     background: "rgba(0, 0, 0, 0.7)",
+      //   });
     },
     handleRemove(file, fileList) {
       this.changeFillId(fileList, this.fileName);
@@ -203,45 +204,45 @@ export default {
           this.accept = ".jpg, .JPG, .jpeg, .JPEG .png, .PNG";
           this.fileTypeName = "图片";
           this.uploadName = name + "图片";
-          this.uploadTip = "只能上传.jpg, .jpeg, .png文件，大小不超过2MB"
+          this.uploadTip = "只能上传.jpg, .jpeg, .png文件，大小不超过2MB";
           break;
         case "mp3":
           this.accept = ".mp3,.MP3,.wav,.WAV";
           this.fileTypeName = "音频";
           this.uploadName = name + "音频";
-          this.uploadTip = "只能上传音频文件，大小不超过20MB"
+          this.uploadTip = "只能上传音频文件，大小不超过20MB";
           break;
         case "mp4":
           this.accept = ".mp4,.MP4,.mov,.MOV";
           this.fileTypeName = "视频";
           this.uploadName = name + "视频";
-          this.uploadTip = "只能上传视频文件，大小不超 2GB"
+          this.uploadTip = "只能上传视频文件，大小不超 4GB";
           break;
         case "pdf":
           this.accept = ".pdf";
           this.fileTypeName = "pdf";
           this.uploadName = name + "pdf";
-          this.uploadTip = "只能上传pdf文件，大小不超过20MB"
+          this.uploadTip = "只能上传pdf文件，大小不超过20MB";
           break;
         case "xls":
           this.accept = ".xls,.xlsx";
           this.fileTypeName = "表格";
           this.uploadName = name + "表格";
-          this.uploadTip = "只能上传excel文件，大小不超过20MB"
+          this.uploadTip = "只能上传excel文件，大小不超过20MB";
           break;
         case "lrc":
           this.accept = ".lrc";
           this.fileTypeName = "lrc";
           this.uploadName = name + "lrc";
-          this.uploadTip = "只能上传lrc文件，大小不超过20MB"
+          this.uploadTip = "只能上传lrc文件，大小不超过20MB";
           break;
         case "video&radio":
           this.accept = ".mp3,.MP3,.wav,.WAV,.mp4,.MP4,.mov,.MOV";
-          this.uploadTip = ""
+          this.uploadTip = "";
           break;
         case "txt":
           this.accept = ".txt,.TXT";
-          this.uploadTip = ""
+          this.uploadTip = "";
           break;
         default:
           this.accept = "*";
@@ -254,13 +255,13 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.upload-style{
-    padding: 8px;
-    border-radius: 2px;
-    border: 1px dashed #E5E6EB;
-    background: #F2F3F5;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 22px;
+.upload-style {
+  padding: 8px;
+  border-radius: 2px;
+  border: 1px dashed #e5e6eb;
+  background: #f2f3f5;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
 }
 </style>