被微信拍照时页面会被刷新的BUG给折磨疯了
查了好久，也没有结果，只能默默的忍受着，痛苦着；在调用微信的
wx.chooseImage
wx.getLocalImgData
wx.uploadImage总会莫名的出现页面刷新，导致上传的图片丢失；一直存在这个明显的BUG：在微信公众号拍照后，会出现概率重定向到当前页面（当前页面被刷新，或者叫做重新加载）。
后来发现是说Android设备中底层bug导致，无法在上层处理，所有调用微信的jssdk也会出现此问题；
现象
- 在上传组件中(哪怕是最简单的
)，当选择好本地图片或者调取系统摄像头拍好照片后，网页被刷新。这一问题无法100%重现，但概率不低，在如红米等低端安卓机上发生的概率会比较高。- 与用系统自带的浏览器打开的情况相比，在微信中打开的情况下该问题出现的更为频繁。
- 与选择本地图片上传相比，调取系统摄像头拍照上传的情况下该问题出现的更为频繁。
随便找了两家知名公司的网站(新浪微博、赶集网)，在用Android设备访问网页并试图进行图片上传时，都发生了这一问题。
在经过一番搜索和调研后，发现这个问题的原因远比自己想象的要复杂：这是一个由Android操作系统底层设计缺陷所导致的问题，对于Web开发者来说，没有什么办法能真正解决这一bug。
这个问题并不是最近才开始出现的，早在2013年该问题就已报给Android技术团队了(Android issue)。但可惜的是，直至现在Android团队依旧没有正视该问题。导致问题的步骤是这样的(为方便描述，App内嵌的webview也以“浏览器”一词进行表示)：
问题原因
- 当在Android的浏览器上调用文件上传功能时，Android系统将把当前进程从“浏览器”切换到“文件选择器”(根据不同的用户选择，这一新的进程可能是图片选择器，也可能是系统摄像头，或者其它别的)，此时浏览器进程将变为后台进程。
- 由于Android操作系统的设计缺陷，此时浏览器进程的留存优先级(不被系统kill掉的优先级)与所有其它的后台进程是一样的，因此如果操作系统认为内存不足需要进行清理，此时浏览器进程将不会得到任何保护 -- 很不幸，因为浏览器占用内存一般都比较大，所以这次kill操作很容易kill掉浏览器进程。
- 当用户选择好图片返回浏览器时，浏览器进程已经不复存在了，按照Android的机制，浏览器进程将进行恢复，试图恢复到kill之前的状态 -- 很不幸，恢复到什么状态是由浏览器来决定的，而浏览器不可能100%恢复到选择文件之前的那个状态。因此最终用户所看到的现象就是：选择文件完成后，浏览器刷新了一下，而刷新到什么状态由浏览器决定。
对于这一问题，Android技术团队的态度是回避(将bug标记为obsolete) -- 可能是因为此bug涉及了OS底层进程切换的机制，修复起来风险太高；而随着手机设备内存容量的增大，这一问题所发生的概率会越来越小。
理解了问题的原因，对问题的一些表征也就有了合理的解释：低端安卓机的内存更小，因此发生问题的频率更高；而与选择本地图片相比，调取系统摄像头所耗的内存更大(当拍摄有大量文字的图片时尤其如此)，因此调取摄像头时问题发生的更加频繁；当用户已经开了很多别的App时，问题发生的概率更大。
问题的优化
对于这一问题，真正的解决方法需要对Android的底层细节进行修改，比如定义与当前进程相关联的后台进程，并对这些有关联的后台进程设置高优先级。在Android团队将问题彻底解决之前，这一bug是无解的，但存在一些workaround：
- 在上传操作之前，往浏览器里写一个标志性的cookie(或者localStorage等本地存储方案)，上传成功后清除该标志位。而在初始加载页面时，判断该标志位是否存在 -- 如果存在，那么就意味着当前的这一次页面加载是由于浏览器进程被kill后重启所导致的。此时可以alert出一些消息，提醒用户内存不足，需要关闭一些别的App。这一方案只能说提升了一些用户体验，无法避免问题的发生；同时，由于部分Android版本的内存优化缺陷，导致在系统内存还有很多的情况下也会启动内存清理操作，使得alert出来的消息对用户造成困扰。
- 如果主要场景是在微信中打开的，那么可以尝试使用微信JSSDK中的图片上传接口来完成图片的上传操作。我没有做过严格的测试对比，因此只能做一些猜测：对于JSSDK中的接口，相信微信团队是做了不少测试和修复工作的(比如针对此文所提到的问题，避免切换到外部进程，或者让webview的恢复更加正确)，所以采用这一方案该问题的发生概率也许会比较小。但不利的是，调用微信JSSDK所上传的图片会在微信的服务器上暂存3天，因此这一方案不适用于需要上传敏感信息的情况。
除了上述的两种workaround，另外还存在两个替代方案：
- 开发Native App。当自己的App进程由于内存清理而被kill掉后，对于恢复阶段要恢复成什么样子，开发人员可以做的会更多。
- 限定发布的web服务所支持的手机范围为iPhone和内存较多的中高端Android机型
很遗憾，这一问题没有很好的解决方案，既有的workaround要么隐私性上有问题(也不确定到底会有多大的改善)，要么基本于事无补。Web项目开发能做的，也就只能是从设计上尽量减少图片上传操作了。
下面是一段EXT的图片上传的方法，截取补全，仅供记录和参考。
onTap: function(e) {
var me = this;
//单张图片上传
if(me.config.type == 'single'){
if(me.config.src.indexOf ('common/xiangji.png') > -1
|| me.config.src.indexOf ('common/shenfenzheng.png') > -1
|| me.config.src.indexOf ('common/yinhangka.png') > -1
|| me.config.src.indexOf ('/fileupload/display/') > -1){
//选择图片
var mesrc = me.config.src;
wx.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有，当前指压缩的
sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds;
var id = localIds[0].toString();
if(window.__wxjs_is_wkwebview){
wx.getLocalImgData({
localId: id, // 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
localData = localData.replace('jgp', 'jpeg');
me.setSrc(localData);
me.config.src = localData;
}
});
}else{
me.config.src = id;
me.setSrc(id);
if (id.indexOf("wxlocalresource") != -1) {
id = id.replace("wxlocalresource", "wxLocalResource");
}
}
//图片上传
setTimeout(function(){
wx.uploadImage({
localId: id,
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var fmMediaId = res.serverId; // 返回身份证图片的微信服务器端ID
me.parent.query('input[type="hidden"]')[0].setValue(fmMediaId);
me.config.mediaId = fmMediaId
if( mesrc.indexOf ('common/shenfenzheng.png') > -1
|| mesrc.indexOf ('common/yinhangka.png') > -1){
var parentWidth = me.parent.el.dom.offsetWidth;
var meWidth = me.el.dom.offsetWidth;
var left = (parentWidth-meWidth)/2;
var button = Ext.create('Ext.Button', {
height:28,
width:meWidth,
left:left,
style:'background: #000;border-radius: 0;opacity: 0.7;color: #fff;font-size: 1.4rem;letter-spacing: 6px;text-indent: 6px;',
text:'删除',
bottom:0,
listeners:{
tap: function(){
this.parent.remove(this);
me.setSrc(mesrc);
me.config.src = mesrc;
me.parent.query('input[type="hidden"]')[0].setValue('');
}
}
});
me.parent.add(button);
} else {
var button = Ext.create('Ext.Button', {
height:28,
width:105,
style:'background: #000;border-radius: 0;opacity: 0.7;color: #fff;font-size: 1.4rem;letter-spacing: 6px;text-indent: 6px;',
text:'删除',
bottom:0,
listeners:{
tap: function(){
this.parent.remove(this);
me.setSrc('./resources/common/xiangji.png');
me.config.src = './resources/common/xiangji.png';
me.parent.query('input[type="hidden"]')[0].setValue('');
}
}
});
me.parent.add(button);
}
}
});
},100);
}
});
}else{
var srcList = [];
srcList.push(me.config.src);
//图片预览
wx.previewImage({
current: me.config.src, // 当前显示图片的http链接
urls: srcList// 需要预览的图片http链接列表
});
}
}
//多张图片上传
else if(this.config.type == 'multiple'){
//默认最多上传3张图片
if(EU.isEmpty(me.config.max)) {
me.config.max = 3;
}
var objHidden = me.parent.parent.query('input[type="hidden"]')[0];
if(me.config.src.indexOf ('common/xiangji.png') > -1){
//图片选择
wx.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有，当前指压缩的
sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds;
var id = localIds[0].toString();
me.config.src = id;
if(window.__wxjs_is_wkwebview){
wx.getLocalImgData({
localId: id, // 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
localData = localData.replace('jgp', 'jpeg');
me.setSrc(localData);
}
});
}else{
me.setSrc(id);
if (id.indexOf("wxlocalresource") != -1) {
id = id.replace("wxlocalresource", "wxLocalResource");
}
}
//图片上传
setTimeout(function(){
wx.uploadImage({
localId: id,
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var fmMediaId = res.serverId; // 返回身份证图片的微信服务器端ID
me.config.mediaId = fmMediaId;
var mediaId = objHidden.getValue();
if(EU.isEmpty(mediaId)){
objHidden.setValue(fmMediaId);
}else{
objHidden.setValue(mediaId + ',' + fmMediaId);
}
var button = Ext.create('Ext.Button', {
height:28,
width:'100%',
style:'background: #000;border-radius: 0;opacity: 0.7;color: #fff;font-size: 1.4rem;letter-spacing: 6px;text-indent: 6px;',
text:'删除',
bottom:0,
listeners:{
tap: function(){
var mediaId = objHidden.getValue();
if(mediaId.substring(mediaId.length-1,mediaId.length) !== ','){
mediaId = mediaId + ',';
}
var ouccerMediaId = me.config.mediaId;
mediaId = mediaId.replace(ouccerMediaId + ',','');
objHidden.setValue(mediaId);
me.config.src = './resources/common/xiangji.png';
this.parent.destroy();
}
}
});
me.parent.add(button);
if(me.config.max>objHidden.getValue().split(",").length){
var container = Ext.create('Ext.Container', {
width:'30%',
margin:'0 10px 10px 0',
style:'float:left',
items:[]
});
var image = Ext.create('PlusApp.ux.ImgPhoto', {
height:105,
width:'100%',
style:'float:left;border-radius: 2px;background-size: cover;',
type:'multiple',
cls:'imgGroup',
src: './resources/common/xiangji.png'
});
container.add(image);
me.parent.parent.add(container);
}
}
});
},100);
}
});
}else{
var srcList = [];
var imgGroup = Ext.query('.imgGroup');
for (var i = 0; i < imgGroup.length; i++) {
var imgSrc = imgGroup[i].style.backgroundImage;
if(imgSrc.indexOf('weixin') > -1){
imgSrc = imgSrc.substring(imgSrc.indexOf('weixin'),imgSrc.indexOf('")'));
srcList.push(imgSrc);
}
}
//图片预览
wx.previewImage({
current: me.config.src, // 当前显示图片的http链接
urls: srcList// 需要预览的图片http链接列表
});
}
}
}
参考学习：https://blog.csdn.net/dobuy/article/details/87949273
参考学习：http://blog.shaochuancs.com/android-upload-page-refresh/