feat 接口联调

Co-authored-by: Copilot <copilot@github.com>

src/views/systemList/base/base.vue

@@ -10,10 +10,14 @@
           <div class="text-center">
             <el-upload
               v-model:file-list="fileList"
-              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
               list-type="picture-card"
-              :on-preview="handlePictureCardPreview"
+              :limit="1"
               :on-remove="handleRemove"
+              :action="uploadUrl"
+              :on-change="handleChange"
+              :before-upload="beforeUpload"
+              :auto-upload="true"
+              accept="image/jpeg,image/png"
             >
               <el-icon><Plus /></el-icon>
             </el-upload>
@@ -38,9 +42,14 @@
 </template>
 
 <script lang="ts" setup>
-import UserAvatar from '@/views/system/user/profile/userAvatar.vue';
 import { ref, reactive } from 'vue';
-import type { UploadProps, UploadUserFile } from 'element-plus';
+import type { UploadProps, UploadUserFile, UploadRequestOptions } from 'element-plus';
+import { uploadDemo } from '@/api/systemList/index';
+import { ElMessage } from 'element-plus';
+import { Plus } from '@element-plus/icons-vue';
+
+const uploadUrl = import.meta.env.VITE_BASE_API + '/system/logo/upload';
+
 const form = reactive({
   name: '',
   remark: '',
@@ -48,27 +57,104 @@ const form = reactive({
 });
 
 const cancel = () => {
-  console.log('cancel');
+  // TODO: implement cancel logic
 };
 const save = () => {
-  console.log('save');
+  // TODO: implement save logic
 };
 
 /* ------------------------------------------ 图片上传逻辑----------------------------------------- */
-import { Plus } from '@element-plus/icons-vue';
 
-const fileList = ref<UploadUserFile[]>([
-  {
-    name: 'food.jpeg',
-    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-  }
-]);
+const fileList = ref<UploadUserFile[]>([]);
 
 const dialogImageUrl = ref('');
 const dialogVisible = ref(false);
 
+// 自定义上传方法
+const customUpload = async (options: UploadRequestOptions) => {
+  const { file } = options;
+
+  try {
+    // 调用 uploadDemo 接口上传图片到 OSS
+    console.log('开始上传图片...');
+    console.log('文件名:', file.name);
+    console.log('文件大小:', file.size);
+
+    const res = await uploadDemo(file as File);
+
+    console.log('上传响应:', res);
+    console.log('响应数据:', res.data);
+
+    // 假设返回的数据结构中有 url 字段，根据实际情况调整
+    if (res.data && res.data.url) {
+      // 创建新的文件对象并添加到 fileList
+      const newFile: UploadUserFile = {
+        uid: (file as any).uid,
+        name: file.name,
+        status: 'success',
+        url: res.data.url,
+        raw: file as any
+      };
+
+      // 将新文件添加到列表末尾
+      fileList.value.push(newFile);
+
+      // 更新表单中的 logo 字段
+      form.logo = res.data.url;
+
+      ElMessage.success('上传成功');
+    } else {
+      console.error('响应数据中没有 URL:', res.data);
+      ElMessage.error('上传失败，未获取到文件URL');
+    }
+  } catch (error: any) {
+    console.error('上传失败:', error);
+    console.error('错误详情:', error.message);
+    console.error('错误代码:', error.code);
+    console.error('错误响应:', error.response);
+
+    let errorMsg = '上传失败';
+    if (error.code === 'ECONNABORTED' || error.message.includes('timeout')) {
+      errorMsg = '上传超时，请检查网络连接或后端服务是否正常运行';
+    } else if (error.response) {
+      errorMsg = `上传失败: ${error.response.status} - ${error.response.statusText}`;
+    } else if (error.request) {
+      errorMsg = '上传失败: 无法连接到服务器，请检查后端服务是否启动';
+    }
+
+    ElMessage.error(errorMsg);
+  }
+};
+
 const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
-  console.log(uploadFile, uploadFiles);
+  // 清空 logo 字段
+  form.logo = '';
+};
+
+const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
+  console.log('文件改变', '上传文件中', uploadFile, '当前文件列表', uploadFiles);
+  // 确保新上传的图片显示在上传按钮后面（保持数组顺序）
+  fileList.value = [...uploadFiles];
+};
+
+const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
+  console.log('开始上传');
+
+  // 验证文件大小（500KB）
+  const isLt500K = rawFile.size / 1024 / 1024 < 0.5;
+  if (!isLt500K) {
+    ElMessage.error('图片大小不能超过 500KB!');
+    return false;
+  }
+
+  // 验证文件类型
+  const isJPGorPNG = rawFile.type === 'image/jpeg' || rawFile.type === 'image/png';
+  if (!isJPGorPNG) {
+    ElMessage.error('只能上传 JPG/PNG 格式的图片!');
+    return false;
+  }
+
+  return true;
 };
 
 const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {