Ethanfly
2ee017bccf
- Replace favicon.svg in admin panel with new brand logo design - Add logo.png and logo.svg files to dedicated logo directory - Update miniprogram with new logo assets (logo.png and logo.svg) - Add README-UPLOAD.md documentation for miniprogram upload functionality - Update miniprogram app.js and config.js for logo integration - Update miniprogram user page (pages/user/index.js) to use new branding - Update server upload route to handle new logo assets - Add test-upload.js for upload functionality testing - Update server .env configuration for asset handling - Standardize brand visual identity across admin, miniprogram, and server platforms
92 lines
2.8 KiB
Markdown
92 lines
2.8 KiB
Markdown
# 小程序头像上传配置说明
|
||
|
||
## 问题说明
|
||
小程序从本地相册选择头像后，会得到一个临时文件路径（如 `http://tmp/xxx.jpg`），这个路径需要上传到服务器才能永久保存。
|
||
|
||
## 开发环境配置
|
||
|
||
### 1. 微信开发者工具设置
|
||
在微信开发者工具中，需要开启以下选项：
|
||
|
||
1. 点击右上角"详情"
|
||
2. 在"本地设置"中勾选：
|
||
- ✅ **不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书**
|
||
- ✅ **不校验合法域名**
|
||
|
||
这样才能在开发环境中访问 `http://127.0.0.1:3001` 的上传接口。
|
||
|
||
### 2. 确认服务端运行
|
||
确保后端服务正在运行：
|
||
```bash
|
||
cd server
|
||
npm start
|
||
```
|
||
|
||
服务应该运行在 `http://127.0.0.1:3001`
|
||
|
||
### 3. 测试上传功能
|
||
1. 在小程序中点击头像
|
||
2. 选择"从相册选择"
|
||
3. 选择一张图片
|
||
4. 点击"保存"
|
||
5. 查看控制台日志，应该显示：
|
||
- "检测到临时头像，开始上传: http://tmp/xxx.jpg"
|
||
- "头像上传成功: http://127.0.0.1:3001/uploads/xxx.jpg"
|
||
|
||
## 生产环境配置
|
||
|
||
### 1. 小程序后台配置
|
||
在微信公众平台（mp.weixin.qq.com）配置合法域名：
|
||
|
||
1. 登录小程序后台
|
||
2. 进入"开发" -> "开发管理" -> "开发设置"
|
||
3. 在"服务器域名"中配置：
|
||
- **uploadFile合法域名**：`https://yingsa-server.ethan.team`
|
||
- **request合法域名**：`https://yingsa-server.ethan.team`
|
||
- **socket合法域名**：`wss://yingsa-server.ethan.team`
|
||
|
||
### 2. 服务端HTTPS配置
|
||
确保生产环境服务器已配置HTTPS证书。
|
||
|
||
## 常见问题
|
||
|
||
### Q1: 上传失败，提示"不在合法域名列表中"
|
||
**解决方案**：
|
||
- 开发环境：在微信开发者工具中开启"不校验合法域名"
|
||
- 生产环境：在小程序后台配置合法的上传域名
|
||
|
||
### Q2: 上传失败，提示"网络错误"
|
||
**解决方案**：
|
||
- 检查后端服务是否正常运行
|
||
- 检查 `miniprogram/config.js` 中的 `baseUrl` 配置是否正确
|
||
- 查看后端日志是否有错误信息
|
||
|
||
### Q3: 头像显示不出来
|
||
**解决方案**：
|
||
- 检查上传是否成功（查看控制台日志）
|
||
- 检查返回的URL是否正确
|
||
- 确认 `server/uploads` 目录存在且有写入权限
|
||
- 确认服务端的静态文件服务配置正确
|
||
|
||
### Q4: 临时文件路径错误
|
||
**解决方案**：
|
||
- 这是正常的，临时文件只在选择时有效
|
||
- 必须上传到服务器后才能永久使用
|
||
- 代码已经处理了临时文件的上传逻辑
|
||
|
||
## 调试技巧
|
||
|
||
### 查看上传日志
|
||
在小程序控制台中查看：
|
||
```
|
||
检测到临时头像，开始上传: [临时路径]
|
||
上传头像响应: [服务器响应]
|
||
头像上传成功: [最终URL]
|
||
```
|
||
|
||
### 查看服务端日志
|
||
在服务端控制台中查看上传请求和文件保存情况。
|
||
|
||
### 检查文件是否保存
|
||
检查 `server/uploads/` 目录下是否有新上传的文件。
|