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