使用Vant+Vue+HTML5+技术，使用Hbuilder软件，只有前台代码
更换头像有两种方式：拍照上传和相册获取上传
使用的技术：Vue、Vant前台框架（van-actionsheet上拉菜单组件）
HTML5+中的四个组件（Camera、IO、Uploader、Gallery）
代码：主要代码：60-69行、103-194行
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 6 <title>个人资料</title> 7 <script type="text/javascript" src="js/vue.js" ></script> 8 <script type="text/javascript" src="js/vant.js" ></script> 9 <link rel="stylesheet" href="css/vant.css" /> 10 <link rel="stylesheet" href="css/chapter6.css" /> 11 <link rel="stylesheet" href="css/iconfont.css" /> 12 <script type="text/javascript" src="js/lazyload.js" ></script> 13 <script type="text/javascript" src="js/ajax.js" ></script> 14 <style> 15 body{ 16 background-color: #E8E8E8; 17 } 18 .navBarStyle{ 19 padding-top: 20px; 20 background-color: red; 21 color: white; 22 text-align: center; 23 } 24 .col-main{ 25 margin-top: 3%; 26 } 27 .col-footer{ 28 margin-top: 3%; 29 } 30 </style> 31 </head> 32 <body> 33 <div id="personal"> 34 <!--使用van-row和van-col两个组件来进行 行列布局--> 35 <van-row> 36 <!--span设置列所占的宽度百分比--> 37 <van-col span="24"> 38 <!--NavBar导航栏 title标题 left-arrow左侧箭头 @click-left点击左侧按钮时触发--> 39 <van-nav-bar class="navBarStyle" 40 title="个人资料" 41 left-arrow 42 @click-left="onClickLeft" 43 /> 44 </van-col> 45 <van-col span="24" class="col-main"> 46 <!--Cell单元格 value右侧内容 is-link是否展示右侧箭头 --> 47 <van-cell-group> 48 <van-cell value="更换头像" is-link @click="clickRight"> 49 <template slot="title" > 50 <img style="width:40% ;border-radius: 50%;" :src="avatarImage" onerror="javascript:this.src='img/default_avatar.jpg'"/> 51 </template> 52 </van-cell> 53 </van-col> 54 <van-col span="24" class="col-footer"> 55 <van-cell-group> 56 <van-cell title="昵称" is-link :value="NickName" @click="updateNickName()"></van-cell> 57 <van-cell title="手机号码" is-link :value="Phone" @click="updatePhone()"></van-cell> 58 </van-col> 59 </van-row> 60 <!-- van-actionsheet上拉菜单 --> 61 <van-actionsheet v-model="isShow" style="text-align: center; background-color:#EEEEEE;"> 62 <div> 63 <p @click="getHeadPortrait('camera')">照相</p> 64 <p @click="getHeadPortrait('Album')">从相册中选择</p> 65 </div> 66 <div @click="no"> 67 <p>取消</p> 68 </div> 69 </van-actionsheet> 70 </div> 71 <script type="application/javascript"> 72 document.addEventListener('plusready', function(){ 73 personalVue.userKey = plus.storage.getItem("userKey"); 74 personalVue.NickName = plus.storage.getItem("NickName"); 75 personalVue.Phone = plus.storage.getItem("Phone"); 76 personalVue.avatarImage = plus.storage.getItem("AvatarImage"); 77 plus.key.addEventListener("keyup",function(e){ 78 if(e.keyCode==4){ 79 plus.webview.currentWebview().close(); 80 } 81 },false); 82 }); 83 var personalVue = new Vue({ 84 el:'#personal', 85 data:{ 86 userKey:'', 87 avatarImage:"", 88 Phone:"", 89 NickName:"", 90 isShow:false 91 }, 92 methods:{ 93 onClickLeft(){//返回个人中心页面 94 plus.webview.open("personal.html","personal"); 95 plus.webview.currentWebview().close(); 96 }, 97 updateNickName(){//修改昵称页面 98 plus.webview.open("updateNickName.html","updateNickName"); 99 }, 100 updatePhone(){//修改手机号页面 101 plus.webview.open("updatePhone.html","updatePhone"); 102 }, 103 clickRight(){//修改头像 104 this.isShow=true; 105 }, 106 no(){//取消，不修改头像 107 this.isShow=false; 108 }, 109 getHeadPortrait(ways){ 110 if(ways=="camera"){ 111 var cmr = plus.camera.getCamera(); 112 cmr.captureImage(function (p){ //拍照操作成功的回调函数，p拍照操作保存的文件路径 113 plus.io.resolveLocalFileSystemURL(p, function(entry){ 114 var imgUrl = entry.toLocalURL();//获取目录路径转换为本地路径URL地址 115 personalVue.$dialog.confirm({ 116 title: '上传提示', 117 message: '您确定要上传该图片作为头像吗?' 118 }).then( function() {//确认上传 119 var toast = personalVue.$toast.loading({ 120 duration: 0, 121 forbidClick: true,//禁用背景点击 122 message: '正在上传' 123 }); 124 //plus.uploader.createUpload创建上传任务，创建成功返回Upload对象，用于管理上传任务 125 var task = plus.uploader.createUpload( "http://dsapi.ysd3g.com/api/uploadavatarimage?key="+personalVue.userKey+"", 126 { method:"POST",blocksize:204800,priority:100 }, 127 function ( t, status ) { 128 //t为上传任务对象 status为上传结果状态码 129 if(status == 200){//上传成功 130 var responseText = JSON.parse(task.responseText);//获得上传任务完成后服务器返回的数据 131 plus.storage.setItem("AvatarImage",responseText.AvatarImage); 132 //responseText.AvatarImage获得头像路径，重新赋值存储 133 toast = personalVue.$toast.success("上传成功"); 134 personalVue.$toast.clear(); 135 plus.webview.currentWebview().reload(false);//使用缓存，加快读取速度 136 }else{ 137 personalVue.$toast.fail("上传失败："+status); 138 personalVue.$toast.clear(); 139 plus.webview.currentWebview().reload(false); 140 } 141 } 142 ); 143 task.addFile(imgUrl, {key:"imgUrl"}); 144 //addFile添加上传文件，imgUrl上传文件的路径，仅支持本地文件路径，key上传文件在上传任务中的键名 145 task.start(); 146 personalVue.isShow = false; 147 }).catch(function() { 148 personalVue.$toast("取消上传"); 149 }); 150 }); 151 }, function(e){//摄像头操作失败的回调函数 152 personalVue.$toast.fail(e.message); 153 },{index:1,filename:"_doc/camera/"}); 154 } else if (ways=="Album"){ 155 plus.gallery.pick( function(path){//从相册中选择图片 156 personalVue.$dialog.confirm({ 157 title: '上传提示', 158 message: '您确定要上传该图片作为头像吗?' 159 }).then(function(){ 160 var toast = personalVue.$toast.loading({ 161 duration: 0, 162 forbidClick: true, 163 message: '正在上传' 164 }); 165 var task = plus.uploader.createUpload( "http://dsapi.ysd3g.com/api/uploadavatarimage?key="+personalVue.userKey+"", 166 { method:"POST",blocksize:204800,priority:100 }, 167 function ( t, status ) { 168 if(status == 200){ 169 var responseText = JSON.parse(task.responseText); 170 plus.storage.setItem("AvatarImage",responseText.AvatarImage); 171 toast = personalVue.$toast.success("上传成功"); 172 personalVue.$toast.clear(); 173 plus.webview.getWebviewById("personal").reload(); 174 plus.webview.currentWebview().reload(); 175 }else{ 176 personalVue.$toast.fail("上传失败："+status); 177 personalVue.$toast.clear(); 178 plus.webview.currentWebview().reload(false); 179 } 180 } 181 ); 182 task.addFile(path, {key:"imgUrl"}); 183 task.start(); 184 personalVue.isShow = false; 185 }).catch(function() { 186 personalVue.$toast("取消上传"); 187 }); 188 }, function (e) {//选择图片错误回调 189 personalVue.$toast.fail(e.message); 190 }, {filter:"image"} );//相册中选择文件类型过滤器 191 }else{ 192 this.$toast.fail("选择了错误的选项!"); 193 } 194 } 195 } 196 }) 197 </script> 198 </body> 199 </html>
详细解释：
拍照上传：
1.camera组件，获取摄像头管理对象
Camera模块管理设备的摄像头，可用于拍照、摄像操作，通过plus.camera获取摄像头管理对象。
方法：
- getCamera: 获取摄像头管理对象
点击getCamera可查看详细说明
2.进行拍照操作
方法：
- captureImage: 进行拍照操作
点击captureImage可查看详细说明
3.读取文件-io
IO模块管理本地文件系统，用于对文件系统的目录浏览、文件的读取、文件的写入等操作。通过plus.io可获取文件系统管理对象。
方法：
- resolveLocalFileSystemURL: 通过URL参数获取目录对象或文件对象
点击resolveLocalFileSystemURL可查看详细说明
在获取操作文件或目录对象成功的回调函数中使用：
toLocalURL
: 获取目录路径转换为本地路径URL地址
点击toLocalURL可查看详细说明
4.Uploader管理网络上传任务-->createUpload新建上传任务
uploader
Uploader模块管理网络上传任务，用于从本地上传各种文件到服务器，并支持跨域访问操作。通过plus.uploader可获取上传管理对象。Uploader上传使用HTTP的POST方式提交数据，数据格式符合Multipart/form-data规范，即rfc1867（Form-based File Upload in HTML）协议。 方法：
- createUpload: 新建上传任务
点击createUpload可查看详细说明
注意点：
上传任务完成的回调函数是成功或者失败都会触发的，通过参数status上传结果状态码来判断是否上传成功，等于200为上传成功。
相册选取上传：
Gallery获取相册管理对象-->pick从系统相册中选择文件
gallery
Gallery模块管理系统相册，支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。通过plus.gallery获取相册管理对象。
方法：
- pick: 从系统相册选择文件（图片或视频）
点击pick可查看详细说明