手機軟體更換頭像程式碼
阿新 • • 發佈：2018-11-25
使用Vant+Vue+HTML5+技術，使用Hbuilder軟體，只有前臺程式碼
更換頭像有兩種方式：拍照上傳和相簿獲取上傳
使用的技術：Vue、Vant前臺框架（van-actionsheet上拉選單元件）
![]()
HTML5+中的四個元件（Camera、IO、Uploader、Gallery）
![]()
程式碼：主要程式碼：60-69行、103-194行
![]()
![]()
![]()
詳細解釋：
拍照上傳：
1.camera元件，獲取攝像頭管理物件
Camera模組管理裝置的攝像頭，可用於拍照、攝像操作，通過plus.camera獲取攝像頭管理物件。
方法：
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>
- getCamera: 獲取攝像頭管理物件
- captureImage: 進行拍照操作
- resolveLocalFileSystemURL: 通過URL引數獲取目錄物件或檔案物件
- createUpload: 新建上傳任務
- pick: 從系統相簿選擇檔案（圖片或視訊）