小程序模板网

首页 小程序模板网 开发文档 小程序开发教程正文

微信小程序入门《六》头像上传

发布时间：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
本文地址：https://www.eyoucms.com/wxmini/doc/course/18092.html 复制链接 如需定制请联系易优客服咨询：800182392 点击咨询

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

产品

服务

帮助

关于

工作日 8:30-12:00 14:30-18:00
周六及部分节假日提供值班服务

联系我们
QQ在线咨询