歌曲库补全支持上传的文件类型

src/views/api/Music.vue

@@ -5,12 +5,12 @@
       <el-input v-model="search.title" />
     </el-form-item>
     <el-form-item label="所属歌单">
-      <el-select v-model="search.libIds" multiple collapse-tags>
+      <el-select v-model="search.libIds" multiple collapse-tags clearable>
         <el-option v-for="musicLib in musicLibs" :key="musicLib._id" :value="musicLib._id" :label="musicLib.name" />
       </el-select>
     </el-form-item>
     <el-form-item label="文件类型">
-      <el-select v-model="search.exts" multiple >
+      <el-select v-model="search.exts" multiple collapse-tags clearable>
         <el-option v-for="ext in exts" :key="ext" :value="ext" :label="ext" />
       </el-select>
     </el-form-item>
@@ -108,9 +108,9 @@
     </template>
   </el-dialog>
   <el-dialog v-model="uploadModal" title="上传音乐" :width="550" @closed="uploadModalClosed" >
-    <el-form :label-width="80">
-      <el-form-item label="歌单">
-        <el-select v-model="libIdSelected">
+    <el-form ref="uploadForm" :model="uploadFormData" :rules="uploadRules" :label-width="80">
+      <el-form-item label="歌单" prop="libId">
+        <el-select v-model="uploadFormData.libId">
           <el-option v-for="musicLib in musicLibs" :key="musicLib._id" :value="musicLib._id" :label="musicLib.name" />
         </el-select>
       </el-form-item>
@@ -118,20 +118,23 @@
         ref="musicUpload"
         :action="`${apiBase}/music/upload`"
         name="file"
-        accept=".mp3,.flac"
+        :accept="uploadAccept"
         :headers="{token: store.state.loginInfo.token}"
         :on-success="uploadSuccess"
         :on-error="uploadError" 
         :auto-upload="false"
         multiple
         drag
-        :data="{libId: libIdSelected}">
+        :data="{libId: uploadFormData.libId}">
         <div class="el-upload__text">
           拖拽到此处或<em>点击上传</em>
         </div>
         <template #tip>
-          <div class="el-upload__tip">
-            可选择 mp3/flac 文件
+          <div class="el-upload__tip" style="display: flex; align-items: center; gap: 5px;">
+            <span>支持上传的文件类型</span>
+            <el-tag v-for="ext in uploadExtList" :key="ext" size="small">
+              {{ ext }}<span v-if="ext === 'ncm'"> (自动解码)</span>
+            </el-tag>
           </div>
         </template>
       </el-upload>
@@ -190,7 +193,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { useStore } from 'vuex'
 import { useBaseList } from '@/model/baselist'
 import { MsgResult, Page } from '@/model/common.dto'
@@ -228,7 +231,8 @@ const store = useStore()
 const apiBase = import.meta.env.VITE_APP_API_BASE
 const { loading, modalLoading, total, search, setLoadData, loadDataBase, reset, pageChange, pageSizeChange } = useBaseList(new MusicPage())
 const currentRow = ref<MusicModel | null>(null)
-const libIdSelected = ref<string | null>(null)
+const uploadFormData = ref<{ libId: string | null }>({ libId: null })
+const uploadForm = ref<VForm>()
 const exts = ref<string[]>([])
 const musicLibs = ref<MusicLibModel[]>([])
 const musicData = ref<MusicModel[]>([])
@@ -246,6 +250,17 @@ const libDrawerVisible = ref(false)
 const libTableData = ref<(MusicLibModel & { _isNew?: boolean })[]>([])
 const libSaving = ref(false)
 
+const uploadRules = {
+  libId: [{ required: true, message: '请选择歌单', trigger: 'change' }]
+}
+
+const uploadExtList = computed(() => {
+  return Array.from(new Set([...exts.value, 'ncm']))
+})
+const uploadAccept = computed(() => {
+  return uploadExtList.value.map(ext => `.${ext}`).join(',')
+})
+
 const lyricRuleValidate = {
   cloudId: [
     { required: true, message: '请输入网易云ID', trigger: 'blur' }
@@ -360,14 +375,13 @@ async function saveMusicLib(row: MusicModel) {
 }
 function openUploadModal() {
   uploadModal.value = true
-  libIdSelected.value = null
+  uploadFormData.value = { libId: null }
 }
 async function uploadMusic() {
-  if (!libIdSelected.value) {
-    ElMessage.warning('请选择歌单')
-    return
-  }
-  musicUpload.value?.submit()
+  uploadForm.value?.validate((valid: boolean) => {
+    if (!valid) return
+    musicUpload.value?.submit()
+  })
 }
 function uploadSuccess(response: MsgResult) {
   if (response.code === 0) {