网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

微信小程序入門《六》頭像上傳

發布時間：2017-12-08 17:45 所屬欄目：小程序開發教程

上一章介紹了微信小程序入門登錄注冊，這章談談頭像的選擇，上傳，預覽以及后臺服務端代碼的功能。本章節主要用的知識點有

1. action-sheet 底部彈出可選菜單組件

2. wx.uploadFile 將本地資源上傳到服務器

3. wx.chooseImage 從本地相冊選擇圖片或使用相機拍照。

4. wx.previewImage 預覽圖片

效果圖：

wxml代碼：

 

[html] view plain copy
 
  1. <!--  
  2. 變量說明：  
  3. windowHeight ：設備的窗口的高度  
  4. windowWidth ： 設備的窗口的寬度  
  5. actionSheetHidden ： 組件是否顯示  
  6. actionSheetItems ：組件菜單項  
  7. -->  
  8. <view class="page__bd" style="height: {{windowHeight * 0.8}}px; width: {{windowWidth}}px;">  
  9.     <view class="weui-cells weui-cells_after-title me-info"  
  10.     style="top:{{windowHeight * 0.4}}px;">  
  11.         <view class="weui-cell">  
  12.             <view class="weui-cell__hd" style="position: relative;margin-right: 10px;">  
  13.                 <image src="{{userImg}}" style="width: 50px; height: 50px; display: block;border-radius:25px;" bindtap="clickImage"/>  
  14.             </view>  
  15.             <view class="weui-cell__bd">  
  16.                 <navigator url="../login/login" >  
  17.                 點擊登錄</navigator>  
  18.                 <view style="font-size: 13px;color: #888888;">摘要信息</view>  
  19.             </view>  
  20.         </view>  
  21.         <view class="weui-cell weui-cell_access">  
  22.             <view class="weui-cell__bd">  
  23.                 <view style="display: inline-block; vertical-align: middle">發布博客</view>  
  24.             </view>  
  25.             <view class="weui-cell__ft weui-cell__ft_in-access"></view>  
  26.         </view>  
  27.         <view class="weui-cell weui-cell_access">  
  28.             <view class="weui-cell__bd">  
  29.                 <view style="display: inline-block; vertical-align: middle">信息列表</view>  
  30.                 <view class="weui-badge" style="margin-left: 5px;">8</view>  
  31.             </view>  
  32.             <view class="weui-cell__ft weui-cell__ft_in-access">詳細信息</view>  
  33.         </view>  
  34.         <view class="weui-cell weui-cell_access">  
  35.             <view class="weui-cell__bd">  
  36.                 <view style="display: inline-block; vertical-align: middle">個人資料</view>  
  37.             </view>  
  38.             <view class="weui-cell__ft weui-cell__ft_in-access"></view>  
  39.         </view>  
  40.         <view class="weui-cell weui-cell_access">  
  41.             <view class="weui-cell__bd">  
  42.                 <view style="display: inline-block; vertical-align: middle">設置</view>  
  43.             </view>  
  44.             <view class="weui-cell__ft weui-cell__ft_in-access"></view>  
  45.         </view>  
  46.     </view>  
  47.     <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindchange">  
  48.         <block wx:for="{{actionSheetItems}}" wx:key="unique">  
  49.             <action-sheet-item bindtap="{{item.bindtap}}">{{item.txt}}</action-sheet-item>  
  50.         </block>  
  51.         <action-sheet-cancel class="cancel">取消</action-sheet-cancel>  
  52.     </action-sheet>  
  53. </view>  

wxss代碼：

 

[html] view plain copy
 
  1. .page__bd{  
  2.     background: url(https://www.itit123.cn/image/meBack.jpg) no-repeat;  
  3.     background-size:cover;  
  4. }  

js代碼：

 

[html] view plain copy
 
  1. var util = require('../../utils/util.js');  
  2. var app = getApp();  
  3.   
  4. Page({  
  5.     data: {  
  6.         userImg: "../../images/pic_160.png", // 頭像圖片路徑  
  7.         actionSheetHidden: true, // 是否顯示底部可選菜單  
  8.         actionSheetItems: [  
  9.             { bindtap: 'changeImage', txt: '修改頭像' },  
  10.             { bindtap: 'viewImage', txt: '查看頭像' }  
  11.         ] // 底部可選菜單  
  12.     },  
  13.     // 初始化加載獲取設備長寬  
  14.     onLoad: function (options) {  
  15.         var that = this;  
  16.         wx.getSystemInfo({  
  17.             success: function (res) {  
  18.                 that.setData({  
  19.                     windowHeight: res.windowHeight,  
  20.                     windowWidth: res.windowWidth  
  21.                 })  
  22.             }  
  23.         });  
  24.     },  
  25.     // 點擊頭像 顯示底部菜單  
  26.     clickImage: function () {  
  27.         var that = this;  
  28.         that.setData({  
  29.             actionSheetHidden: !that.data.actionSheetHidden  
  30.         })  
  31.     },  
  32.     // 點擊其他區域 隱藏底部菜單  
  33.     actionSheetbindchange: function () {  
  34.         var that = this;  
  35.         that.setData({  
  36.             actionSheetHidden: !that.data.actionSheetHidden  
  37.         })  
  38.     },  
  39.     // 上傳頭像  
  40.     changeImage: function () {  
  41.         var that = this;  
  42.         wx.chooseImage({  
  43.             count: 1, // 默認9  
  44.             sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有  
  45.             sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有  
  46.             success: function (res) {  
  47.                 // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片，只有一張圖片獲取下標為0  
  48.                 var tempFilePaths = res.tempFilePaths[0];  
  49.                 that.setData({  
  50.                     userImg: tempFilePaths,  
  51.                     actionSheetHidden: !that.data.actionSheetHidden  
  52.                 })  
  53.                 util.uploadFile('/itdragon/uploadImage', tempFilePaths, 'imgFile' ,{}, function (res) {  
  54.                     console.log(res);  
  55.                     if (null != res) {  
  56.                         that.setData({  
  57.                             userImg: res  
  58.                         })  
  59.                     } else {  
  60.                         // 顯示消息提示框  
  61.                         wx.showToast({  
  62.                             title: '上傳失敗',  
  63.                             icon: 'error',  
  64.                             duration: 2000  
  65.                         })  
  66.                     }  
  67.                 });  
  68.             }  
  69.         })  
  70.     },  
  71.     // 查看原圖  
  72.     viewImage: function () {  
  73.         var that = this;  
  74.         wx.previewImage({  
  75.             current: '', // 當前顯示圖片的http鏈接  
  76.             urls: [that.data.userImg] // 需要預覽的圖片http鏈接列表  
  77.         })  
  78.     }  
  79. });  

utils.js代碼：

 

[html] view plain copy
 
  1. //上傳文件  
  2. function uploadFile(url, filePath, name, formData, cb) {  
  3.   console.log('a=' + filePath)  
  4.   wx.uploadFile({  
  5.     url: rootDocment + url,  
  6.     filePath: filePath,  
  7.     name: name,  
  8.     header: {  
  9.       'content-type': 'multipart/form-data'  
  10.     }, // 設置請求的 header  
  11.     formData: formData, // HTTP 請求中其他額外的 form data  
  12.     success: function (res) {  
  13.       if (res.statusCode == 200 && !res.data.result_code) {  
  14.         return typeof cb == "function" && cb(res.data)  
  15.       } else {  
  16.         return typeof cb == "function" && cb(false)  
  17.       }  
  18.     },  
  19.     fail: function () {  
  20.       return typeof cb == "function" && cb(false)  
  21.     }  
  22.   })  
  23. }  

后臺服務器代碼：

 

[html] view plain copy
 
  1. @RequestMapping("uploadImage")  
  2.     @ResponseBody  
  3.     public String uploadHeadImage(HttpServletRequest request, @RequestParam(value = "imgFile" , required=false) MultipartFile imageFile) {  
  4.         try {  
  5.             System.out.println("imageFile :::: " + imageFile);  
  6.             String realPath = request.getSession().getServletContext().getRealPath("/");  
  7.             if(imageFile!=null){  
  8.                 if(GenerateUtils.allowUpload(imageFile.getContentType())){  
  9.                     String fileName = GenerateUtils.rename(imageFile.getOriginalFilename());  
  10.                     String saveName = fileName.substring(0,fileName.lastIndexOf("."));  
  11.                     File dir = new File(realPath + "image");  
  12.                     if(!dir.exists()){  
  13.                         dir.mkdirs();  
  14.                     }  
  15.                     File file = new File(dir,saveName+".jpg");  
  16.                     imageFile.transferTo(file);  
  17.                     return "https://www.itit123.cn/sierew/image/"+file.getName();  
  18.                 }  
  19.             }  
  20.         } catch (Exception e) {  
  21.             e.printStackTrace();  
  22.         }  
  23.         return "null";  
  24.     }  

最后是有關頭像裁剪的問題，沒有找到合適的解決方法。不能在選擇圖片的時候進行裁剪，如果有知道的朋友請賜教。還有一種是圖片選擇后裁剪。可以參考 weCropper.js 地址：https://github.com/dlhandsome/we-cropper


易優小程序（企業版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://www.xiuhaier.com/wxmini/doc/course/18092.html 復制鏈接 如需定制請聯系易優客服咨詢：800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×