SAE Storage + Android微信内置浏览器图片上传解决方案

发现需求   

最近在做一个项目，需要在微信里打开的网页中实现上传，IOS通过简单的上传插件可轻松搞定，但无论是FLASH+ＰＨＰ还是ＪＳ＋PHP，安卓平台微信内置浏览器始终无法上传文件。百度谷歌，均没有解决方案，参看很多公众平台的解决方案，多为推荐安卓用户跳到外部浏览器打开网页，但是这样体验不太好，于是着手自己去解决这个问题！再后来，听朋友说微信微社区可正常上传图片，于是去研究其上传代码，研究发现：


微社区在客户端用了一套比较高端的JS框架，该框架将图片进行data:image/jpg;base64编码并ajax的方式传输到服务端，并返回图片的photoid等相关信息。服务器端我是看不到处理的细节，不过大概了解，无非就是对图片进行存储和数据库插入等操作。于是copy下该上传方式的前端代码。再结合SAE Storage的相关API写了一个上传处理的php文件，就很快解决了这个问题，效果不错，部分低端部分手机有闪退现象，这个微社区也存在这种问题。魅族，三星等主流机型均完美上传，现在来和大家分享分享。






解决方案


1.SAE Storage
Storage -> 新建domain并命名为 imagefile，直接点击创建。




2.找到Storage的API http://apidoc.sinaapp.com/sae/SaeStorage.html





upload (line 291)

将文件上传入存储

注意：文件名左侧所有的'/'都会被过滤掉。

• return: 写入成功时返回该文件的下载地址，否则返回false

• author: Elmer Zhang

• access: public
  

• string $domain: 存储域,在在线管理平台.storage页面可进行管理

• string $destFileName: 目标文件名

• string $srcFileName: 源文件名

• array $attr: 文件属性，可设置的属性请参考 SaeStorage::setFileAttr() 方法

• bool $compress: 是否gzip压缩。如果设为true，则文件会经过gzip压缩后再存入Storage，常与$attr=array('encoding'=>'gzip')联合使用
  

将数据写入存储

注意：文件名左侧所有的'/'都会被过滤掉。

• return: 写入成功时返回该文件的下载地址，否则返回false

• author: Elmer Zhang

• access: public
  

• string $domain: 存储域,在在线管理平台.storage页面可进行管理

• string $destFileName: 文件名

• string $content: 文件内容,支持二进制数据

• int $size: 写入长度,默认为不限制

• array $attr: 文件属性，可设置的属性请参考 SaeStorage::setFileAttr() 方法

• bool $compress: 是否gzip压缩。如果设为true，则文件会经过gzip压缩后再存入Storage，常与$attr=array('encoding'=>'gzip')联合使用
  

PHP代码 

1. <?php

2.     //感谢@韩文博1学长的代码精炼建议  

3.       $ex = explode(",",$_POST['pic']);//分割data-url数据

4.       $filter=explode('/', trim($ex[0],';base64'));//获取文件类型

5.       $s = base64_decode(str_replace($filter[1] , '', $ex[1]));//图片解码

6.   

7.       $picname = date("YmdHis") . rand(100, 999) .'.'.$filter[1];//生成随机文件名

9.       $s = new SaeStorage();//实例化SeaStorage类

10.       $photo_id = $s->write("imagefile",$picname,$ss);//把解码后的图片写入创建的imagefile里，成功返回图片的url

11.   

12.       if($photo_id){  //返回json数据到浏览器端

13.         $status='success';

14.         $errCode='0';

15.           $arr = array(

16.             'photo_id'=>$photo_id,

17.             'status'=>$status,

18.             'errCode'=>$errCode);

19.       echo json_encode($arr);

20.       }

21.       

23.   ?>

4.前端上传代码登录微社区，找到发帖功能，自行chrome工具下载前端代码。




修改相应的服务器端响应文件（见图中选取的部分）


5.拓展阅读




Data URL是在本地直接绘制图片，不是从服务器加载，所以节省了HTTP连接，起到加速网页的作用。 

语法：
data:image/jpg; 声明数据协议及类型名称
base64, 编码形式为base64
/9j/4AAQSkZ…… base64编码结果

附上Data URL的生成方法（PHP）： 

PHP代码 

1. <?php

3. $img_file = file_get_contents("http://tieba.baidu.com/tb/static-common/img/dimensionCode/tb_common_2dbc.jpg");

5. echo base64_encode($img_file);

7. ?>