使用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可查看詳細說明