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



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

相关文章
SpringData【Spring整合Hibernate】
SpringData【Spring整合Hibernate】
4 0
说出你和「云原生」的故事,获得年度云原生顶级盛会通行证
快来投稿你与云原生的故事,即可获得价值 350 元的 KubeCon + CloudNativeCon + OpenSource Summit 2021 China Virtual 门票!
6 0
推理速度提升29倍,参数少1/10,阿里提出AdaBERT压缩方法
作为当前最佳的自然语言处理模型,BERT 却存在规模大、成本高和实时性差等缺点。为了能在实际应用中部署这种技术,有必要对 BERT 进行压缩。此前机器之心就已经介绍了几种来自不同研究机构的压缩方案,参阅《内存用量 1/20,速度加快 80 倍,腾讯 QQ 提出全新 BERT 蒸馏框架,未来将开源》和《AAAI 2020 | 超低精度量化 BERT,UC 伯克利提出用二阶信息压缩神经网络》。
3 0
SpringBoot-RabbitMQ01-入门介绍
AMQP (Advanced Message Queuing Protocol ,高级消息队列协议)是 个线路层的协议规范,而不是 API 规范(例如 JMS )。由于 AMQP 是一个线路层协议规范,因此它天然就是跨平台的,就像 SMTP HTTP 等协议 样,只要开发者按照规范的格式发送数据,任何平台都可以通过 AMQP进行消息交互。像目前流行的 StormMQ RabbitMQ 等都实现了 AMQP. ———————————————— 版权声明:本文为CSDN博主「波波烤鸭」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://bl
3 0
初次尝试ecs部署spring boot个人小项目
本学期在学习课程中需要实现高级编程语言设计一个app或者web管理系统,我选择用spring boot写了一个博客管理系统,初次尝试了在aliyun部署项目
6 0
SpringDataRedis介绍
实际项目中我们一般都会使用Redis来作为我们的缓存组件,往往又会和Spring一块使用,虽然Redis官方提供的有Jedis等客户端工具,但是使用的时候还是有些不方便,这时SpringDataRedis出现了。
4 0
第一次胜过MobileNet的二值神经网络,-1与+1的三年艰苦跋涉
近日,苹果以 2 亿美元左右价格收购初创公司 Xnor.ai 的消息引起了社区极大的关注。作为一家以二值神经网络 Xnor-net 起家的人工智能初创公司,Xnor.ai 被苹果高价收购,也许预示着低功耗、高效能的二值神经网络技术将开启广阔的应用前景。
4 0
SpringCloud-分布式配置中心【入门介绍】
SpringCloud-分布式配置中心【入门介绍】
3 0
中科院计算所对「木兰」问题进行处理:当事人停职,将深入调查
国产编程语言「木兰」在推出之后受到了人们的质疑。昨天下午,中国科学院计算技术研究所对此进行了回应。
4 0
SpringBoot-RabbitMQ02-原理介绍
本文来介绍下RabbitMQ的工作原理。在具体介绍之前最好对java的观察者模式有所了解,那么对于消息中间件就非常好理解了
5 0
+关注
6323
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载