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

name, overview, todos, isProject

name	overview	todos	isProject
支持 webp 上传	slot_admin 后端已允许 webp；需在 slot_admin_vue 的图片上传组件默认 accept 中加入 `.webp`（及 MIME），即可在管理端选择并上传 webp 文件。	id content status update-accept-default 在 sa-upload-image/index.vue 的 accept 默认值与模板 fallback 中加入 .webp、image/webp，并修正 .bpm → .bmp completed id content status manual-verify-upload 在活动/Banner 等页面上传 webp，确认选择器可选且接口返回 URL completed	false

slot_admin_vue 支持 WebP 图片上传

问题定位

管理端图片上传统一走 sa-upload-image 组件，通过 Arco a-upload 的 accept 限制文件选择器可见格式：

        :accept="props.accept ?? '.jpg,jpeg,.gif,.png,.svg,.bpm'"

  accept: { type: String, default: '.jpg,jpeg,.gif,.png,.svg,.bpm' },

当前默认列表不含 .webp，因此在系统文件对话框中无法选择 webp（或部分浏览器会拦截）。组件内 uploadImageHandler 没有再做扩展名校验，上传逻辑直接调用 /saimulti/system/uploadImage。

后端已支持 webp，无需改动：

    'upload_allow_image' => 'jpg,jpeg,png,gif,svg,bmp,webp,avif',

UploadService 按扩展名与白名单比对，webp 已在列表中。

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

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 第 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 是否被覆盖（线上配置应与仓库一致）。