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

本文涉及的产品
Serverless 应用引擎免费试用套餐包,4320000 CU,有效期3个月
简介:


发现需求   

最近在做一个项目,需要在微信里打开的网页中实现上传,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 ,如需转载请自行联系原作者



相关实践学习
1分钟部署经典小游戏
本场景介绍如何使用Serverless应用引擎SAE 1分钟快速部署经典小游戏。
SAE的功能与使用入门
欢迎来到《SAE的功能与使用入门》,本课程是“云原生Serverless Clouder认证“系列中的第三阶段。课程将向您介绍阿里云Serverless应用引擎(SAE)服务相关的概念、特性与使用方式。通过课程将带您逐步深入探索Serverless世界,借助SAE服务,即使没有丰富的云计算和IT经验,也能够让开发人员在实际业务场景中便捷的掌握如何构建和部署应用程序,快速拥抱Serverless架构,将精力聚焦在应用代码和业务逻辑的实现上。 学习完本课程后,您将能够: 掌握Serverless应用引擎(SAE)的基本概念与核心优势 了解Serverless应用引擎(SAE)的核心功能 掌握使用Serverless应用引擎(SAE)的开发和部署流程 了解Serverless应用引擎(SAE)的适用场景和最佳实践 &nbsp;
相关文章
|
2月前
|
XML Android开发 数据格式
Android利用selector(选择器)实现图片动态点击效果
本文介绍了Android中ImageView的`src`与`background`属性的区别及应用,重点讲解如何通过设置背景选择器实现图片点击动态效果。`src`用于显示原图大小,不拉伸;`background`可随组件尺寸拉伸。通过创建`selector_setting.xml`,结合`setting_press.xml`和`setting_normal.xml`定义按下和正常状态的背景样式,提升用户体验。示例代码展示了具体实现步骤,包括XML配置和形状定义。
Android利用selector(选择器)实现图片动态点击效果
|
2月前
|
JSON 监控 小程序
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
148 14
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
|
2月前
|
Java Android开发
Android图片的手动放大缩小
本文介绍了通过缩放因子实现图片放大缩小的功能,效果如动图所示。关键步骤包括:1) 在布局文件中设置 `android:scaleType=&quot;matrix&quot;`;2) 实例化控件并用 `ScaleGestureDetector` 处理缩放手势;3) 使用 `Matrix` 对图片进行缩放处理。为避免内存崩溃,可在全局配置添加 `android:largeHeap=&quot;true&quot;`。代码中定义了 `beforeScale` 和 `nowScale` 变量控制缩放范围,确保流畅体验。
|
2月前
|
缓存 编解码 Android开发
Android内存优化之图片优化
本文主要探讨Android开发中的图片优化问题,包括图片优化的重要性、OOM错误的成因及解决方法、Android支持的图片格式及其特点。同时介绍了图片储存优化的三种方式:尺寸优化、质量压缩和内存重用,并详细讲解了相关的实现方法与属性。此外,还分析了图片加载优化策略,如异步加载、缓存机制、懒加载等,并结合多级缓存流程提升性能。最后对比了几大主流图片加载框架(Universal ImageLoader、Picasso、Glide、Fresco)的特点与适用场景,重点推荐Fresco在处理大图、动图时的优异表现。这些内容为开发者提供了全面的图片优化解决方案。
|
9月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
1405 1
|
10月前
|
存储 缓存 编解码
Android经典面试题之图片Bitmap怎么做优化
本文介绍了图片相关的内存优化方法,包括分辨率适配、图片压缩与缓存。文中详细讲解了如何根据不同分辨率放置图片资源,避免图片拉伸变形;并通过示例代码展示了使用`BitmapFactory.Options`进行图片压缩的具体步骤。此外,还介绍了Glide等第三方库如何利用LRU算法实现高效图片缓存。
147 20
Android经典面试题之图片Bitmap怎么做优化
|
9月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
597 1
|
9月前
|
机器学习/深度学习 人工智能 JSON
微信小程序原生AI运动(动作)检测识别解决方案
近年来,疫情限制了人们的出行,却推动了“AI运动”概念的兴起。AI运动已在运动锻炼、体育教学、线上主题活动等多个场景中广泛应用,受到互联网用户的欢迎。通过AI技术,用户可以在家中进行有效锻炼,学校也能远程监督学生的体育活动,同时,云上健身活动形式多样,适合单位组织。该方案成本低、易于集成和扩展,已成功应用于微信小程序。
|
9月前
|
JSON 小程序 前端开发
微信小程序-人脸核身解决方案
微信小程序-人脸核身解决方案
853 0
|
9月前
|
云安全 存储 小程序
PHP微信小程序解决方案PhpMall
PHP微信小程序解决方案PhpMall
134 0

热门文章

最新文章