feat 上传图片

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

.env.development

@@ -34,3 +34,5 @@ VITE_APP_WEBSOCKET = false
 
 # sse 开关
 VITE_APP_SSE = true
+
+VITE_BASE_API = "http://192.168.1.100:8080"

.eslintrc-auto-import.json

@@ -5,6 +5,10 @@
     "ComputedRef": true,
     "DirectiveBinding": true,
     "EffectScope": true,
+    "ElLoading": true,
+    "ElMessage": true,
+    "ElMessageBox": true,
+    "ElNotification": true,
     "ExtractDefaultPropTypes": true,
     "ExtractPropTypes": true,
     "ExtractPublicPropTypes": true,

src/views/systemList/base/base.vue

@@ -16,7 +16,7 @@
               :action="uploadUrl"
               :on-change="handleChange"
               :before-upload="beforeUpload"
-              :auto-upload="true"
+              :auto-upload="false"
               accept="image/jpeg,image/png"
             >
               <el-icon><Plus /></el-icon>
@@ -44,23 +44,53 @@
 <script lang="ts" setup>
 import { ref, reactive } from 'vue';
 import type { UploadProps, UploadUserFile, UploadRequestOptions } from 'element-plus';
-import { uploadDemo } from '@/api/systemList/index';
+import { uploadDemo, getDemo, updateDemo } from '@/api/systemList/index';
 import { ElMessage } from 'element-plus';
 import { Plus } from '@element-plus/icons-vue';
+import { on } from 'node:cluster';
+import { get } from 'node:http';
 
 const uploadUrl = import.meta.env.VITE_BASE_API + '/system/logo/upload';
 
 const form = reactive({
   name: '',
   remark: '',
-  logo: ''
+  logoUrl: ''
 });
 
-const cancel = () => {
+const getList = async () => {
-  // TODO: implement cancel logic
+  const res = await getDemo();
+
+  console.log('getList基本数据', res);
+
+  if (res.data.url) {
+    fileList.value = [
+      {
+        url: res.data.url,
+        name: '系统图标'
+      }
+    ];
+    form.logoUrl = res.data.url;
+    form.name = res.data.name;
+  }
 };
-const save = () => {
+
-  // TODO: implement save logic
+const cancel = () => {
+  fileList.value = [];
+  form.logoUrl = '';
+  form.name = '';
+};
+const save = async () => {
+  getList();
+  updateDemo(form)
+    .then((res) => {
+      console.log('保存成功', res);
+      //ElMessage.success('保存成功');
+    })
+    .catch((err) => {
+      console.error('保存失败', err);
+      //ElMessage.error('保存失败');
+    });
 };
 
 /* ------------------------------------------ 图片上传逻辑----------------------------------------- */
@@ -70,73 +100,35 @@ 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) => {
   // 清空 logo 字段
-  form.logo = '';
+  form.logoUrl = '';
 };
 
-const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
+// 自定义 change 处理函数
-  console.log('文件改变', '上传文件中', uploadFile, '当前文件列表', uploadFiles);
+const handleChange = (file: any) => {
-  // 确保新上传的图片显示在上传按钮后面（保持数组顺序）
+  // ⚠️ 核心点：必须使用 file.raw 才能获取到真实的原生 File 对象
-  fileList.value = [...uploadFiles];
+  const realFile = file.raw;
+
+  console.log('原生file对象', realFile);
+
+  // 直接调用你封装好的 uploadDemo 方法
+  uploadDemo(realFile)
+    .then((res) => {
+      console.log('上传成功', res);
+      const logoImage = {
+        name: res.data.name,
+        url: res.data.url
+      };
+      fileList.value = [logoImage];
+    })
+    .catch((err) => {
+      console.error('上传失败', err);
+      fileList.value = []; // 清空上传列表
+    });
 };
 
+//验证逻辑
 const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
   console.log('开始上传');
 
@@ -161,6 +153,10 @@ const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
   dialogImageUrl.value = uploadFile.url!;
   dialogVisible.value = true;
 };
+
+onMounted(() => {
+  getList();
+});
 </script>
 
 <style lang="scss" scoped>