- 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
2.8 KiB
2.8 KiB
小程序头像上传配置说明
问题说明
小程序从本地相册选择头像后,会得到一个临时文件路径(如 http://tmp/xxx.jpg),这个路径需要上传到服务器才能永久保存。
开发环境配置
1. 微信开发者工具设置
在微信开发者工具中,需要开启以下选项:
- 点击右上角"详情"
- 在"本地设置"中勾选:
- ✅ 不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书
- ✅ 不校验合法域名
这样才能在开发环境中访问 http://127.0.0.1:3001 的上传接口。
2. 确认服务端运行
确保后端服务正在运行:
cd server
npm start
服务应该运行在 http://127.0.0.1:3001
3. 测试上传功能
- 在小程序中点击头像
- 选择"从相册选择"
- 选择一张图片
- 点击"保存"
- 查看控制台日志,应该显示:
- "检测到临时头像,开始上传: http://tmp/xxx.jpg"
- "头像上传成功: http://127.0.0.1:3001/uploads/xxx.jpg"
生产环境配置
1. 小程序后台配置
在微信公众平台(mp.weixin.qq.com)配置合法域名:
- 登录小程序后台
- 进入"开发" -> "开发管理" -> "开发设置"
- 在"服务器域名"中配置:
- uploadFile合法域名:
https://yingsa-server.ethan.team - request合法域名:
https://yingsa-server.ethan.team - socket合法域名:
wss://yingsa-server.ethan.team
- uploadFile合法域名:
2. 服务端HTTPS配置
确保生产环境服务器已配置HTTPS证书。
常见问题
Q1: 上传失败,提示"不在合法域名列表中"
解决方案:
- 开发环境:在微信开发者工具中开启"不校验合法域名"
- 生产环境:在小程序后台配置合法的上传域名
Q2: 上传失败,提示"网络错误"
解决方案:
- 检查后端服务是否正常运行
- 检查
miniprogram/config.js中的baseUrl配置是否正确 - 查看后端日志是否有错误信息
Q3: 头像显示不出来
解决方案:
- 检查上传是否成功(查看控制台日志)
- 检查返回的URL是否正确
- 确认
server/uploads目录存在且有写入权限 - 确认服务端的静态文件服务配置正确
Q4: 临时文件路径错误
解决方案:
- 这是正常的,临时文件只在选择时有效
- 必须上传到服务器后才能永久使用
- 代码已经处理了临时文件的上传逻辑
调试技巧
查看上传日志
在小程序控制台中查看:
检测到临时头像,开始上传: [临时路径]
上传头像响应: [服务器响应]
头像上传成功: [最终URL]
查看服务端日志
在服务端控制台中查看上传请求和文件保存情况。
检查文件是否保存
检查 server/uploads/ 目录下是否有新上传的文件。