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 ,如需转载请自行联系原作者



相关实践学习
基于小程序Serverless开发个人相册小程序
本场景基于小程序云Serverless+小程序开发者工具(IDE),快速搭建个人相册小程序
SAE的功能与使用入门
欢迎来到《SAE的功能与使用入门》,本课程是“云原生Serverless Clouder认证“系列中的第三阶段。课程将向您介绍阿里云Serverless应用引擎(SAE)服务相关的概念、特性与使用方式。通过课程将带您逐步深入探索Serverless世界,借助SAE服务,即使没有丰富的云计算和IT经验,也能够让开发人员在实际业务场景中便捷的掌握如何构建和部署应用程序,快速拥抱Serverless架构,将精力聚焦在应用代码和业务逻辑的实现上。 学习完本课程后,您将能够: 掌握Serverless应用引擎(SAE)的基本概念与核心优势 了解Serverless应用引擎(SAE)的核心功能 掌握使用Serverless应用引擎(SAE)的开发和部署流程 了解Serverless应用引擎(SAE)的适用场景和最佳实践 &nbsp;
相关文章
|
14天前
|
安全 Shell Android开发
Android系统 init.rc sys/class系统节点写不进解决方案和原理分析
Android系统 init.rc sys/class系统节点写不进解决方案和原理分析
43 0
|
14天前
|
XML Android开发 数据格式
android点击FrameLayout、LinearLayout等父布局没响应的原因以及解决方案
android点击FrameLayout、LinearLayout等父布局没响应的原因以及解决方案
45 2
|
14天前
|
移动开发 小程序 API
微信外部浏览器或短信链接唤起微信小程序的解决方案
微信外部浏览器或短信链接唤起微信小程序的解决方案
208 1
|
14天前
|
Java Android开发
android 下载图片的问题
android 下载图片的问题
16 3
|
14天前
|
Android开发
Android通过手势(多点)缩放和拖拽图片
Android通过手势(多点)缩放和拖拽图片
15 4
|
10天前
浏览器兼容性解决方案
浏览器兼容性解决方案。
10 1
|
14天前
|
Android开发
Android中Glide加载Https图片失败的解决方案
Android中Glide加载Https图片失败的解决方案
21 1
|
14天前
浏览器兼容性解决方案
【5月更文挑战第4天】浏览器兼容性解决方案。
14 5
|
14天前
|
安全 编译器 API
Android HAL深入探索(5): 调试HAL报错与解决方案
Android HAL深入探索(5): 调试HAL报错与解决方案
83 1
|
14天前
|
存储 应用服务中间件 网络安全
Android 网络链接稳定性测试解决方案
Android 网络链接稳定性测试解决方案
25 0

热门文章

最新文章