实战

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

上传图片后更新不同步

来源：7-23 头像上传后跨页面调用自定义事件刷新

一抹茶

2019-04-21

进入我的页面后，缩略图显示的是默认图片，过一会儿后图片消失。数据库中图片是最新状态，也可以通过浏览器url访问图片
图片描述
图片描述

点击头像后，大图显示一会儿后也消失
图片描述

图片描述

前端日志显示的 img_my_face.src 路径都是正确的
图片描述
图片描述
图片描述

写回答

4回答

一抹茶

提问者

2019-04-21

...老师，防火墙都关了还是没显示

//img.mukewang.com/szimg/5cbc374300012de308060588.jpg

//img.mukewang.com/szimg/5cbc37440001d31911720382.jpg

//img.mukewang.com/szimg/5cbc3744000196a210801920.jpg


0
2
一抹茶
回复
风间影月
haode
2019-04-21
共2条回复

一抹茶

提问者

2019-04-21

老师，换到一个局域网下还是无效

//img.mukewang.com/szimg/5cbc32340001af9012000193.jpg

//img.mukewang.com/szimg/5cbc323400010b4210801920.jpg

//img.mukewang.com/szimg/5cbc32340001642f10801920.jpg

//img.mukewang.com/szimg/5cbc32340001744210801920.jpg


这是前端代码
fly-me.html

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>

	<body >
		
		<div class="mui-content">
			
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a id="link_myface" href="javascript:;">
						<span class="mui-pull-right mui-icon mui-icon-arrowright" 
							style="line-height: 42px; color: lightgray; margin-left: 3px;"></span>
						<img id="img_my_face" class="mui-media-object mui-pull-right" src="img/defaultIcon.jpg" alt="no picture">
						<div class="mui-media-body" style="line-height: 42px; font-size: 16px;">
							头像
							
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<span class="mui-pull-right mui-icon mui-icon-arrowright" 
							style="color: lightgray; margin-left: 3px;"></span>
						<span id="span_nickname" class="mui-pull-right"
							style="color: gray;font-size: 14px;"></span>
						<div class="mui-media-body">
							昵称
							
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<span id="span_username" class="mui-pull-right"
							style="color: gray;font-size: 14px;"></span>
						<div class="mui-media-body">
						    账号
							
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<span class="mui-pull-right mui-icon mui-icon-arrowright" 
							style="color: lightgray; margin-left: 3px;"></span>
						<img class="mui-media-object mui-pull-right" src="img/qr_code.png"
							style="max-height: 20px;max-width: 20px;">
						<div class="mui-media-body">
						    我的二维码
							
						</div>
					</a>
				</li>
			</ul>
			
			<br>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" style="text-align: center;">
					<a href="javascript:;">
						<div class="mui-media-body">
						    退出登录
							
						</div>
					</a>
				</li>
			</ul>
		</div>
		
		
		
		
		
		<script src="js/mui.js"></script>
		<script src="js/app.js"></script>
		<script type="text/javascript">
			mui.init()
			
			mui.plusReady(function () {
			   
			   // 获得当前的webview,刷新用户信息
				var meWebview = plus.webview.currentWebview();
				meWebview.addEventListener("show", function() {
					refreshUserInfo();
				});
				
				// 页面跳转,我的头像
				var link_myface = document.getElementById("link_myface");
				link_myface.addEventListener("tap", function() {
					mui.openWindow("myface.html", "myface.html");
				});
				
				// 添加自定义事件,刷新头像
				window.addEventListener("refresh", function() {
					refreshUserInfo();
				});
			});
			
			function refreshUserInfo() {
				var user = app.getUserGlobalInfo();
				
				
				if (user != null) {
					console.log("fly-me:user.faceImage " + user.faceImage);
					var faceImage = user.faceImage;
					var nickname = user.nickname;
					var username = user.username;
					
					var span_nickname = document.getElementById("span_nickname");
					var span_username = document.getElementById("span_username");
					
					span_nickname.innerHTML = nickname;
					span_username.innerHTML = username;
					
					if (app.isNotNull(faceImage)) {
						var img_my_face = document.getElementById("img_my_face");
						img_my_face.src = app.imgServerUrl + faceImage;
						console.log("refreshUserInfo fly-me:img_my_face.src " + img_my_face.src);
					}
				}
			}
			
		</script>
	</body>

</html>


myface.html

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/header.css" type="text/css">
	</head>

	<body>
		<header class="mui-bar mui-bar-nav title">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<a id="openMenu" class="mui-icon mui-icon-right-nav mui-pull-right" style="color: white;">...</a>
			<h1 class="mui-title title-color"><font color="white">个人头像</font></h1>
		</header>
		
		<div class="mui-content">
			<img id="img_myface" src="img/defaultIcon.jpg">
		</div>
		
		<div id="sheet-myface" class="mui-popover mui-popover-bottom mui-popover-action ">
			<!-- 可选择菜单 -->
			<ul class="mui-table-view">
			  <li class="mui-table-view-cell">
				<a id="link_choosePhoto" href="#">选择照片</a>
			  </li>
			  <li class="mui-table-view-cell">
				<a id="link_savePhoto" href="#">下载照片</a>
			  </li>
			</ul>
			<!-- 取消菜单 -->
			<ul class="mui-table-view">
			  <li class="mui-table-view-cell">
				<a href="#sheet-myface"><b>取消</b></a>
			  </li>
			</ul>
		</div>
		
		
		<script src="js/mui.js"></script>
		<script src="js/app.js"></script>
		<script type="text/javascript">
			mui.init()
			
			mui.plusReady(function () {
			    var user = app.getUserGlobalInfo();
				var img_my_face = document.getElementById("img_myface");
				
				if (user != null) {
					var faceImage = user.faceImageBig;
					if (app.isNotNull(faceImage)) {
						
						img_my_face.src = app.imgServerUrl + faceImage;
						console.log("myface:img_my_face.src " + img_my_face.src);
					}
					
				}
				
				// 获取手机端可见屏幕宽度
				var imgWidth = document.body.clientWidth;
				var imgHeight = document.body.clientHeight;
				img_myface.width = imgWidth;
				img_myface.height = imgWidth;
				
				// 绑定选择菜单
				var openMenu = document.getElementById("openMenu");
				openMenu.addEventListener("tap", function() {
					mui("#sheet-myface").popover("toggle");
				});
				
				// 绑定选择照片按钮
				var link_choosePhoto = document.getElementById("link_choosePhoto");
				link_choosePhoto.addEventListener("tap", function() {
					mui.openWindow("plugin/v3.1.6/myface-uploader.html", "myface-uploader.html");
					mui("#sheet-myface").popover("toggle");
				});
				
				// 绑定保存照片按钮
				var link_savePhoto = document.getElementById("link_savePhoto");
				link_savePhoto.addEventListener("tap", function() {
					alert("save");
				});
				
				
			});
		</script>
	</body>

</html>


myface-uploader.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Cropper</title>
<script src="../../js/mui.min.js"></script>
<link href="../../css/mui.min.css" rel="stylesheet" />
<link href="../../css/header.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/cropper.css">
<link rel="stylesheet" href="css/main.css">

<style>

#container {
width: 100%;
position: absolute;
top: 44px;
bottom: 0px;
background: #000000;
}

</style>
</head>

<body>

<header class="mui-bar mui-bar-nav title" style="position: fixed;">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
<a id="cutter" class="mui-pull-right" style="font-size: 15px;color: white;line-height: 40px;">
<img src="../../img/upload.png" width="20px"/>
</a>
<h1 class="mui-title title-color"><b id="chatting-nickname">个人头像</b></h1>
</header>

<!-- Content -->
<div id="container">
<div class="img-container">
<img id="image" src="" style="background-color: #000000;">
</div>
</div>

<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<script src="https://fengyuanchen.github.io/js/common.js"></script>
<script src="js/cropper.js"></script>
<script src="../../js/app.js"></script>

<script type="text/javascript">
mui.init();

var $image = $('#image');
mui.plusReady(function() {

var user = app.getUserGlobalInfo();
var faceImage = user.faceImageBig;
// 获取屏幕宽度，设置图片
$image.attr('src', app.imgServerUrl + faceImage);

/** ======================== 从相册选择图片 ======================== **/
// 从相册中选择图片
console.log("从相册中选择图片:");
    plus.gallery.pick( function(path){
   
     $image.attr('src', path);
   
     faceCutter();
    }, function ( e ) {
     mui.openWindow("index.html", "index.html");
    }, {filter:"image"} );

/** ======================== 图片裁剪 ======================== **/

$("#cutter").on('tap', function() {

plus.nativeUI.showWaiting( "上传中..." );

var cropper = $image.data('cropper');
var result = $image.cropper("getCroppedCanvas");
if(result) {
var base64Url = result.toDataURL();

// 上传头像
var user = app.getUserGlobalInfo();
// 与后端联调
mui.ajax(app.serverUrl + "/u/uploadFaceBase64",{
data:{
userId:user.id,
faceData:base64Url
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
headers:{'Content-Type':'application/json'},               
success:function(data){

// 关闭等待框
plus.nativeUI.closeWaiting();

if (data.status == 200) {
var userInfo = data.data;
console.log("myface-uploader:" + userInfo);
app.setUserGlobalInfo(userInfo);
console.log("update myface-uploader:" + JSON.stringify(userInfo));
// 触发另外一个webview的自定义事件,可以使用mui.fire()
var imooc_meWebview = plus.webview.getWebviewById("fly-me.html");
mui.fire(imooc_meWebview, "refresh");


// 页面跳转
mui.openWindow("index.html", "index.html");
} else {
app.showToast(data.msg, "error");
}
}
});
}
});
});

function faceCutter() {

plus.nativeUI.showWaiting( "请稍等..." );

// var $image = $('#image');
var options = {
aspectRatio: 1 / 1,
crop: function(e) {}
};

// Cropper
$image.cropper(options);

plus.nativeUI.closeWaiting();
}
</script>

</body>

</html>


0
1
风间影月
代码没啥问题，之前有同学和你一样噢，是你的网络因素造成的，你把防火墙啥的也都要关闭啊
2019-04-21
共1条回复

一抹茶

提问者

2019-04-21

老师，我试了一下，好像是因为前端没法访问图片服务器，可以在浏览器里访问，这是什么原因

//img.mukewang.com/szimg/5cbc0ff90001a61713830274.jpg

//img.mukewang.com/szimg/5cbc0ff90001736714880789.jpg

//img.mukewang.com/szimg/5cbc0ff90001804d10801920.jpg


0
1
风间影月
网络互通就可以了，手机和电脑在同一个局域网就行的
2019-04-21
共1条回复

风间影月

2019-04-21

上传后要更新这个页面的值的，有个fire方法，你看一下视频里是有的，或者你找一下这个页面的源码，通过fire可以刷新这个页面的值

0
0

Netty+Spring Boot仿微信-全栈开发高性能后台及客户端

SpringBoot/Netty+MUI全栈开发 同时搞定后台+ Android&iOS

1498 学习 · 684 问题

查看课程

相似问题

新更新的原生上传图片出现问题，拿不到后端的反馈

回答 2

问题：使用7-22中的上传，上传图片不成功（如图）

回答 1

手机相册图片过多是否会导致无法选择图片?

回答 1

上传图片前后端联调测试，user数据库里的face_image 和 face_image_big

回答 1

问一下老师 图片 语音 怎么发送呢? 有没有思路?

回答 1

打开慕课网App查看更多内容