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