跨终端实践：丢掉你的数据线吧（售后维权图片上传功能增强改造）

背景

在“我的淘宝”中发起售后维权后，需要上传举证图片。我们通常的做事是，先手机拍好照片，然后用数据线导入到电脑中，最后上传提交。淘宝成立10年了，大家一直都这么操作，觉得没什么问题。

“举个栗子”

某天，你愤怒的用手机拍了几张卖家寄过来假货的照片，准备作为凭证提交。
突然，发现数据线忘带了，真是悲剧！！
肿么办？肿么办？
找同事借一根啊！好吧，你狠。
要是你的micro usb接口坏了呢，你肿么办？？告诉我你要肿么办？？

当然有办法，而且非常简单。
下面就来告诉你，我们是怎么做到的！

二维码传图

通过手机扫描二维码后上传。
是不是很简单，是不是有种恍然大悟、如沐春风、醍醐灌顶、茅塞顿开、大彻大悟的感觉？

什么？？没弄明白如何使用二维码上传？？
好吧，看来我有必要详细解释下我们的方案。

继续看图

1、首先，在需要上传图片的地方嵌入一个与该页面有特殊关联的二维码。比如你已经发起了一个维权，那么这个URL里面就需要带上维权编号。我们还可以通过token、session失效时间、加密等方式实现免登录和防止出现安全漏洞。

2、用户通过手机或者PAD扫描该二维码，进入图片上传界面。说到这里不得不给大家讲下我在开发过程中遇到的各种坑。

开始我做了一个还比较酷的界面：http://satans17.github.io/fragment/upload.html
放到手机上测试，发现各种兼容性问题。

  • 部分手机（android2.3下的360，UC）浏览器不能fire file控件的click事件,所以没办法使用fileAPI实现预览，更没办法使用formData，XMLHttpRequest实现异步上传。建议直接使用最原始的form表单提交的方式。
  • 使用android2.3下的微信二维码扫描，也不能使用file控件，别的版本没试过。初步估计是微信定制了一些系统自带浏览器的功能，目前还不明真相。 这个比较好解决，就推荐他使用淘宝APP或者一淘火眼，还能顺便推广下我们自己的应用。
  • 部分浏览器没有支持拍照功能，只能选择已有的图片，比如android下的360，chrome表现得比较好，可惜android4.0才能装。

由于设备有限，可能还有其他问题。如果有人遇到，请一起讨论下。

3、用户在手机上提交图片后，提示他返回电脑上继续操作。如果想用户体验做得更好，可以在网页上轮询，看看是否有新图片提交，如果有，就直接显示在网页上。粗暴点的做法就是手机上传成功后，提示他返回刷新电脑上的网页。

思路有了，功能实现起来不难。
从有了这个想法到产品上线，我们只有了三天时间。
下面的截图是上线后的效果

第一步：扫描二维码

第二步：手机上传相册中的图片 或者 直接拍照

第三步：凭证上传成功

小结

几年前，PC机是我们的主要终端设备，相机、麦克、扫描仪、摄像头等都是以PC机的辅助设备出现的。
随着科技的发展，出现了智能手机、iTV、PAD、google glass、kindle等产品，他们都能以独立的终端形式出现，每种设备都有自己的特点和特长，能满足用户的不同需求。而且这些设备越来越多的被人接受和普及，很多人往往在同时使用好几种终端。
例如：你可能在用PC机看电影的同事，还在用手机微信泡妹子。

利用这些不同的终端，不同终端的特性，我们一定可以创造出更多更棒的跨终端操作的用户体验！