ok

plans/支持_webp_上传_1fe8ff80.plan.md

@@ -0,0 +1,80 @@
+---
+name: 支持 webp 上传
+overview: slot_admin 后端已允许 webp；需在 slot_admin_vue 的图片上传组件默认 accept 中加入 `.webp`（及 MIME），即可在管理端选择并上传 webp 文件。
+todos:
+  - id: update-accept-default
+    content: 在 sa-upload-image/index.vue 的 accept 默认值与模板 fallback 中加入 .webp、image/webp，并修正 .bpm → .bmp
+    status: completed
+  - id: manual-verify-upload
+    content: 在活动/Banner 等页面上传 webp，确认选择器可选且接口返回 URL
+    status: completed
+isProject: false
+---
+
+# slot_admin_vue 支持 WebP 图片上传
+
+## 问题定位
+
+管理端图片上传统一走 [`sa-upload-image`](backend/slot_admin_vue/src/components/sa-upload-image/index.vue) 组件，通过 Arco `a-upload` 的 `accept` 限制文件选择器可见格式：
+
+```28:28:backend/slot_admin_vue/src/components/sa-upload-image/index.vue
+        :accept="props.accept ?? '.jpg,jpeg,.gif,.png,.svg,.bpm'"
+```
+
+```67:67:backend/slot_admin_vue/src/components/sa-upload-image/index.vue
+  accept: { type: String, default: '.jpg,jpeg,.gif,.png,.svg,.bpm' },
+```
+
+当前默认列表**不含** `.webp`，因此在系统文件对话框中无法选择 webp（或部分浏览器会拦截）。组件内 `uploadImageHandler` **没有**再做扩展名校验，上传逻辑直接调用 `/saimulti/system/uploadImage`。
+
+**后端已支持 webp**，无需改动：
+
+```10:10:backend/slot_admin/plugin/saimulti/config/upload.php
+    'upload_allow_image' => 'jpg,jpeg,png,gif,svg,bmp,webp,avif',
+```
+
+[`UploadService`](backend/slot_admin/plugin/saimulti/service/storage/UploadService.php) 按扩展名与白名单比对，webp 已在列表中。
+
+```mermaid
+flowchart LR
+  Browser["浏览器文件选择器 accept"]
+  SaUpload["sa-upload-image"]
+  API["POST /saimulti/system/uploadImage"]
+  UploadService["UploadService 扩展名校验"]
+  Browser -->|"缺 .webp 时被过滤"| SaUpload
+  SaUpload --> API
+  API --> UploadService
+  UploadService -->|"webp 已允许"| Storage["S3/本地存储"]
+```
+
+全项目使用 `sa-upload-image` 时均未自定义 `:accept`，改组件默认值即可覆盖活动图、Banner、头像、配置项等所有入口。
+
+## 修改方案（仅前端，单文件）
+
+**文件**：[`backend/slot_admin_vue/src/components/sa-upload-image/index.vue`](backend/slot_admin_vue/src/components/sa-upload-image/index.vue)
+
+1. 将 `accept` 默认值与模板中的 fallback 统一为包含 webp，建议与后端白名单对齐：
+
+   ```
+   image/jpeg,image/png,image/gif,image/webp,image/svg+xml,.jpg,.jpeg,.png,.gif,.webp,.svg,.bmp
+   ```
+
+   - 同时写上 **MIME**（`image/webp`）和 **扩展名**（`.webp`），兼容 macOS/Chrome 对 webp 的识别方式。
+   - 顺带修正现有笔误：`.bpm` → `.bmp`（与后端 `bmp` 一致）。
+
+2. 两处需同步修改（保持 `props.accept ?? ...` 与 `defineProps` default 一致）：
+   - 第 28 行模板 `:accept`
+   - 第 67 行 `accept` prop default
+
+**不需要改后端**：`upload.php` 已含 `webp`。
+
+## 可选（非本次必须）
+
+若还需在**富文本编辑器**「资源选择器」里插入已有 webp 资源，[`ma-wangEditor/index.vue`](backend/slot_admin_vue/src/components/ma-wangEditor/index.vue) 第 67–72 行对图片 URL 的判断未包含 `.webp`，可另开小改；与本地上传 `sa-upload-image` 无关。
+
+## 验证步骤
+
+1. 本地启动 slot_admin_vue，打开任意带 `sa-upload-image` 的页面（如活动编辑、Banner 编辑）。
+2. 点击「本地上传」，文件选择器应能显示 `.webp` 文件。
+3. 上传一张 webp（建议 < 5MB，与 `upload_size` 一致），应成功返回 URL 并预览。
+4. 若仍报错「不支持该格式的文件上传」，检查运行环境 `plugin/saimulti/config/upload.php` 是否被覆盖（线上配置应与仓库一致）。