perf: 优化上传组件

base-manager-ui/admin/src/components/YUpload.vue

@@ -39,25 +39,34 @@
         </div>
       </slot>
     </a-upload>
-    <PrevieModal
-      :previewVisible.sync="previewVisible"
-      :previewData="previewData"
-    ></PrevieModal>
+    <!-- 视频、音频预览 -->
+    <div class="modal" v-if="previewVisible">
+      <video
+        v-if="previewData.type == 'video'"
+        :src="previewData.url"
+        autoplay
+        muted
+        controls
+      ></video>
+      <audio
+        v-if="previewData.type == 'audio'"
+        :src="previewData.url"
+        autoplay
+        controls
+      ></audio>
+      <a-icon type="close-circle" @click="previewVisible = false" />
+    </div>
   </div>
 </template>
 
 <script>
 // import { uploadFile } from "@/services/user";
-import PrevieModal from "@/components/PrevieModal.vue";
-
 export default {
   model: {
     prop: "value",
     event: "onChange",
   },
-  components: {
-    PrevieModal,
-  },
+  components: {},
   props: {
     name: {
       type: String,
@@ -86,7 +95,7 @@ export default {
       validator: (value) => {
         return value >= 0;
       },
-      default: 0, // 0为不限制
+      default: 1, // 0为不限制
     },
     // 上传文件大小限制mb 0为不限制
     MB: {
@@ -107,7 +116,32 @@ export default {
       FileList: [],
       imageType: ["png", "jpg", "jpeg", "gif", "svg"],
       videoType: ["mp4", "avi", "wmv", "rmvb", "flv", "mkv"],
-      previewData: {},
+      audioType: [
+        "mp3",
+        "wav",
+        "amr",
+        "aac",
+        "ogg",
+        "wma",
+        "flac",
+        "ape",
+        "mid",
+        "wav",
+        "wma",
+        "mp3",
+        "m4a",
+        "m4r",
+        "m4p",
+        "m4b",
+        "wma",
+        "wav",
+        "wma",
+        "wma",
+      ],
+      previewData: {
+        type: "",
+        url: "",
+      },
       previewVisible: false,
     };
   },
@@ -117,18 +151,22 @@ export default {
         if (newValue) {
           if (Array.isArray(newValue)) {
             this.FileList = newValue.map((v) => {
+              let index = v.lastIndexOf("/");
+              let name = v.slice(index + 1);
               return {
                 uid: v,
-                name: v,
+                name,
                 status: "done",
                 url: v,
               };
             });
           } else {
             this.FileList = newValue.split(",").map((v) => {
+              let index = v.lastIndexOf("/");
+              let name = v.slice(index + 1);
               return {
                 uid: v,
-                name: v,
+                name,
                 status: "done",
                 url: v,
               };
@@ -189,7 +227,8 @@ export default {
           isType = fileType.includes(type);
         }
         if (!isType) {
-          this.$message.error(`请上传${this.accept}文件!`);
+          let msg = this.accept.replaceAll(",", "或者");
+          this.$message.error(`请上传${msg}文件!`);
         }
 
         if (this.MB) {
@@ -214,15 +253,17 @@ export default {
           images: [url],
         });
       } else if (this.videoType.includes(type)) {
-        this.previewData = {
-          type: "video",
-          url,
-        };
+        this.previewData.type = "video";
+        this.previewData.url = url;
+        this.previewVisible = true;
+      } else if (this.audioType.includes(type)) {
+        this.previewData.type = "audio";
+        this.previewData.url = url;
         this.previewVisible = true;
       } else {
         let a = document.createElement("a");
         a.href = url;
-        a.download = new Date().getTime() + "." + type;
+        a.download = file.name;
         document.body.appendChild(a);
         a.click();
         document.body.removeChild(a);
@@ -240,4 +281,26 @@ export default {
   display: flex;
   flex-wrap: wrap;
 }
+.modal {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  left: 0px;
+  top: 0px;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  z-index: 999;
+  video {
+    height: 400px;
+  }
+  .anticon-close-circle {
+    font-size: 36px;
+    color: #fff;
+    cursor: pointer;
+  }
+}
 </style>

base-manager-ui/admin/src/pages/basicset/appmarket/modal/AddApp.vue

@@ -83,7 +83,8 @@
             v-if="form.appType === 1"
           >
             <YUpload
-              accept=".zip"
+              accept=".zip,.mp4"
+              :MB="150"
               :limit="1"
               v-model="form.filePath"
               @onSuccess="appUpload"