From f0fa9cf67de0d5cd609829b7cef513e8bfe2b5c4 Mon Sep 17 00:00:00 2001
From: ikmkj <lol1980299316@qq.com>
Date: Wed, 11 Mar 2026 14:12:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(playlist):=20=E6=B7=BB=E5=8A=A0=E6=AD=8C?=
 =?UTF-8?q?=E5=8D=95=E5=B0=81=E9=9D=A2=E4=B8=8A=E4=BC=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在编辑表单中新增 coverFile 字段用于存储封面文件
- 移除原有的头像上传URL和请求头配置
- 实现封面预览功能，支持本地图片预览
- 修改歌单更新接口调用，支持封面文件参数传递
- 替换原有的封面上传成功回调为封面选择处理逻辑
- 更新上传组件配置，使用手动上传模式并支持图片预览
- 优化封面上传前验证和错误处理机制
---
 music-qianduan/src/views/user/Playlist.vue | 57 ++++++----------------
 1 file changed, 16 insertions(+), 41 deletions(-)

diff --git a/music-qianduan/src/views/user/Playlist.vue b/music-qianduan/src/views/user/Playlist.vue
index af3fd34..bd77bf5 100644
--- a/music-qianduan/src/views/user/Playlist.vue
+++ b/music-qianduan/src/views/user/Playlist.vue
@@ -34,7 +34,8 @@ const createForm = reactive({
 const editForm = reactive({
   id: null,
   name: '',
-  description: ''
+  description: '',
+  coverFile: null
 })
 
 // 表单规则
@@ -52,14 +53,6 @@ const formRules = {
 const createFormRef = ref(null)
 const editFormRef = ref(null)
 
-// 头像上传URL
-const coverUploadUrl = ref(`${import.meta.env.VITE_API_BASE_URL || ''}/api/file/upload/image`)
-
-// 头像上传headers
-const uploadHeaders = ref({
-  [userStore.tokenName]: userStore.token
-})
-
 // 获取自建歌单列表
 const fetchUserPlaylists = async () => {
   loading.value = true
@@ -107,6 +100,8 @@ const openEditDialog = (playlist) => {
   editForm.id = playlist.id
   editForm.name = playlist.name
   editForm.description = playlist.description
+  editForm.coverFile = null
+  coverPreview.value = playlist.cover
   editDialogVisible.value = true
 }
 
@@ -144,7 +139,7 @@ const handleUpdatePlaylist = () => {
         const res = await updatePlaylist(editForm.id, {
           name: editForm.name,
           description: editForm.description
-        })
+        }, editForm.coverFile)
 
         if (res.code === 200) {
           // 更新成功，重新获取歌单列表
@@ -185,33 +180,13 @@ const handleDeletePlaylist = (id) => {
   }).catch(() => {})
 }
 
-// 封面上传成功
-const handleCoverSuccess = async (response) => {
-  if (response.code === 200) {
-    // 上传成功，获取图片URL
-    const imageUrl = response.data
+// 封面预览URL
+const coverPreview = ref('')
 
-    try {
-      // 更新歌单封面
-      const res = await updatePlaylist(currentPlaylist.value.id, {
-        ...editForm,
-        cover: imageUrl
-      })
-
-      if (res.code === 200) {
-        // 更新成功，重新获取歌单列表
-        await fetchUserPlaylists()
-        ElMessage.success('封面上传成功')
-      } else {
-        ElMessage.error(res.message || '更新歌单封面失败')
-      }
-    } catch (error) {
-      console.error('更新歌单封面失败:', error)
-      ElMessage.error('更新歌单封面失败')
-    }
-  } else {
-    ElMessage.error(response.message || '封面上传失败')
-  }
+// 封面选择处理（不自动上传，仅本地预览）
+const handleCoverChange = (file) => {
+  editForm.coverFile = file.raw
+  coverPreview.value = URL.createObjectURL(file.raw)
 }
 
 // 封面上传前的处理
@@ -354,15 +329,15 @@ onMounted(() => {
         <el-form-item label="封面">
           <el-upload
             class="cover-uploader"
-            :action="coverUploadUrl"
-            :headers="uploadHeaders"
+            action="#"
             :show-file-list="false"
-            :on-success="handleCoverSuccess"
+            :auto-upload="false"
+            :on-change="handleCoverChange"
             :before-upload="beforeCoverUpload"
           >
             <img
-              v-if="currentPlaylist"
-              :src="currentPlaylist.cover"
+              v-if="coverPreview"
+              :src="coverPreview"
               class="cover"
             />
             <el-icon v-else class="cover-uploader-icon"><plus /></el-icon>