上传和相册.md

概况

简介
这份文档用来管理上传图片和相册的产品设计、开发进度和改进。妈妈咪呀，感谢微信官方开放了js-sdk，使得开发者可以调用微信各种接口，因此我们决定改进目前匹配系统的上传方式，并增加相册功能。
目的
1.确保所有用户都能上传照片，消除历史性bug；
2.增加相册模块，相册会极大增加匹配系统的粘性和吸引力；
3.相关技术积累，之后我们可以实现更多功能；

---

产品设计

在原个人资料页增加了上传入口和相册入口。上传入口包括：更换头像，更换背景和管理个人相册。

HKQLVSNDU@48HDFB$GVE`90.png

【注意】在这里，点击更换头像和更换背景，都是调用微信的上传接口。@striving，你和@strong的工作要合并。头像和背景的更换，流程和周五讲基本一致：
用户操作流程
1.在上面出现的弹出框中点击更换头像或更换背景，底部出现微信自带的拍照/相册模块。

![Q(NR]HJR3ZU{H_G55$]29FJ.png](http://upload-images.jianshu.io/upload_images/36968-cc3d430008c6b48d.png)

2.若用户选择两幅或以上图片，alert“只能选择一张图片哟_请重试”
3.步骤2的用户界面显示。由于后台过程耗时会很长，所以得在页面上显示点东西。
a.“上传中”进度条显示。
b.alert“照片已经上传成功啦，稍后刷新才能显示哦~”

相册
在现行个人资料页的背景图片右下角显示相册图标和照片数量。点击图标进入相册页面，这个页面由微信接口调用，我们无法修改。

相册管理页面

![OSD]EAYMV~X{`CR}JKDSNWF.png](http://upload-images.jianshu.io/upload_images/36968-29aa45237dc6e432.png)

说明：
1.点击删除，这个div被hidden，其他图片自动填补它的位置。同时ajax发送删除请求，数据库删除相关条目。
2.添加照片按钮，类似上传头像/背景的按钮，但是可以同时上传多张。限制最大数量。设相册容量是m(或者8，或者12，不确定)，已上传的是n，若选择的照片超过m-n张，alert“个人相册只能保留m张照片，目前已上传n张，你还能上传m-n张”。
【问题】@skyway，关于缩略图，直接请求是不是比saveas更快？若是，直接访问缩略图链接，若不是，每次都同时保存缩略图。缩略图用居中裁剪。

---

技术细节

• 以上说明，相应的前后端修改
• access-token临界的问题什么时候搞定
• 图片处理相关七牛的文档。怎么压缩，是否需要一律转jpg，是否需要渐进显示。
• 初步确定：头像压缩100-100，背景400-250.相册等比例压缩，分辨率和质量设定待定。

---

进度

1.striving已经写了选择图片-上传-保存七牛-保存数据库基本框架OK
2.草图基本搞定OK
3.喵喵设计草图已OK
4.striving和skyway继续完善细节，相册管理页面的后台实现
5.strong根据现有说明预研。先解决pjax吧~~~
6.strong基本前端实现OK
7.后端不稳定，还需完善

---

优化

• 用户检测。点击OnLine，若用户未上传头像，跳转至上传页面；点击相册，若用户未上传背景，跳转至相册管理页面。用户检测的优化在BigBang臆想一文中给出，这里无视
• 不切割背景图，个人资料页的背景初始状态显示400 * 250.手指按住下滑显示全局。
  clipcss属性。
• pjax实现在OnLine中进入用户资料后返回不改变之前浏览位置，优化用户体验。Qzone触屏版，导航栏切换时没刷新，点击某人动态再返回还是留在原点。

---

结论

1.pjax前后端都看，学习
2.点击个人资料页头像，弹出框两个按钮：头像/背景。再进入上传页面