SAE Storage + Android微信内置浏览器图片上传解决方案-阿里云开发者社区

开发者社区> 技术小甜> 正文

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

简介:
+关注继续查看


发现需求   

最近在做一个项目,需要在微信里打开的网页中实现上传,IOS通过简单的上传插件可轻松搞定,但无论是FLASH+PHP还是JS+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 upload (string $domainstring $destFileNamestring $srcFileName, [array $attr = array()], [bool$compress = false])
  • string $domain: 存储域,在在线管理平台.storage页面可进行管理

  • string $destFileName: 目标文件名

  • string $srcFileName: 源文件名

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

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


write (line 251)

将数据写入存储

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

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

  • author: Elmer Zhang

  • access: public

string write (string $domainstring $destFileNamestring $content, [int $size = -1], [array $attr = array()], [bool $compress = false])
  • string $domain: 存储域,在在线管理平台.storage页面可进行管理

  • string $destFileName: 文件名

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

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

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

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










这里有两个函数可用,一个是upload,另一个是write,经实测,用upload直接处理编码过的图片会报错,应该需要先用PHP中的 base64_decode()函数解码再用write函数写入sae storage上刚才新建的imagefile里。







3.服务器端的处理代码如下:

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];//生成随机文件名

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

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

  10.   

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

  12.         $status='success';

  13.         $errCode='0';

  14.           $arr = array(

  15.             'photo_id'=>$photo_id,

  16.             'status'=>$status,

  17.             'errCode'=>$errCode);

  18.       echo json_encode($arr);

  19.       }

  20.       

  21.   ?>

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




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


5.拓展阅读




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

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

附上Data URL的生成方法(PHP): 


PHP代码 

  1. <?php

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

  3. echo base64_encode($img_file);

  4. ?>


用这种方法会加重客户端的CPU和内存负担,总之有利有弊。 针对于一些小的数据,可以在网页中直接嵌入,而不是从外部文件载入,比如图片。这样的好处是可以减少一次http的请求,缺点是使得页面内容变大。data类型的url格式在98年就已经提出了,现在绝大部分的浏览器都能支持,比如使用IE6内核的国内浏览器,chrome和firefox等,实测安卓和ios上的微信浏览器均兼容此方案。大家有什么疑问,微博私信我http://weibo.com/itjaye











本文转自ljianbing51CTO博客,原文链接: http://blog.51cto.com/ljianbing/1607026,如需转载请自行联系原作者



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Oracle 11g R2版本使用exp命令导出表不全的解决方案
建议使用 expdp和 impdp 替代  exp和imp 命令!
617 0
Android手机浏览器访问本地网络相关问题
为了测试开发的手机网站,常常需要使手机直接访问本地网络。 在这个过程中碰到几个问题,记下来供以后参考 1. 在本地主机运行apache后,使用localhost和127.0.0.1可以访问页面,但使用IP(即192.168.1.*)访问时得到403 解决:这是由于httpd.conf的安全限制导致。
775 0
关于wordpress主题、插件上传和下载问题及其上传图片权限问题解决方案
主题官方下载地址:https://wordpress.org/themes/ 插件官方下载地址: https://wordpress.org/plugins/ 主题的上传下载,无疑是需要ftp服务器的。
1886 0
西弗吉尼亚州率先实施区块链移动投票解决方案
西弗吉尼亚州率先实施区块链移动投票解决方案
1060 0
+关注
10146
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载