微信小程序入門《六》頭像上傳
發(fā)布時(shí)間：2017-12-08 17:45 所屬欄目：小程序開發(fā)教程
上一章介紹了微信小程序入門登錄注冊，這章談?wù)勵^像的選擇，上傳，預(yù)覽以及后臺服務(wù)端代碼的功能。本章節(jié)主要用的知識點(diǎn)有
1. action-sheet 底部彈出可選菜單組件
2. wx.uploadFile 將本地資源上傳到服務(wù)器
3. wx.chooseImage 從本地相冊選擇圖片或使用相機(jī)拍照。
4. wx.previewImage 預(yù)覽圖片
效果圖：
wxml代碼：
- <!--
- 變量說明：
- windowHeight ：設(shè)備的窗口的高度
- windowWidth ： 設(shè)備的窗口的寬度
- actionSheetHidden ： 組件是否顯示
- actionSheetItems ：組件菜單項(xiàng)
- -->
- <view class="page__bd" style="height: {{windowHeight * 0.8}}px; width: {{windowWidth}}px;">
- <view class="weui-cells weui-cells_after-title me-info"
- style="top:{{windowHeight * 0.4}}px;">
- <view class="weui-cell">
- <view class="weui-cell__hd" style="position: relative;margin-right: 10px;">
- <image src="{{userImg}}" style="width: 50px; height: 50px; display: block;border-radius:25px;" bindtap="clickImage"/>
- </view>
- <view class="weui-cell__bd">
- <navigator url="../login/login" >
- 點(diǎn)擊登錄</navigator>
- <view style="font-size: 13px;color: #888888;">摘要信息</view>
- </view>
- </view>
- <view class="weui-cell weui-cell_access">
- <view class="weui-cell__bd">
- <view style="display: inline-block; vertical-align: middle">發(fā)布博客</view>
- </view>
- <view class="weui-cell__ft weui-cell__ft_in-access"></view>
- </view>
- <view class="weui-cell weui-cell_access">
- <view class="weui-cell__bd">
- <view style="display: inline-block; vertical-align: middle">信息列表</view>
- <view class="weui-badge" style="margin-left: 5px;">8</view>
- </view>
- <view class="weui-cell__ft weui-cell__ft_in-access">詳細(xì)信息</view>
- </view>
- <view class="weui-cell weui-cell_access">
- <view class="weui-cell__bd">
- <view style="display: inline-block; vertical-align: middle">個(gè)人資料</view>
- </view>
- <view class="weui-cell__ft weui-cell__ft_in-access"></view>
- </view>
- <view class="weui-cell weui-cell_access">
- <view class="weui-cell__bd">
- <view style="display: inline-block; vertical-align: middle">設(shè)置</view>
- </view>
- <view class="weui-cell__ft weui-cell__ft_in-access"></view>
- </view>
- </view>
- <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindchange">
- <block wx:for="{{actionSheetItems}}" wx:key="unique">
- <action-sheet-item bindtap="{{item.bindtap}}">{{item.txt}}</action-sheet-item>
- </block>
- <action-sheet-cancel class="cancel">取消</action-sheet-cancel>
- </action-sheet>
- </view>
wxss代碼：
- .page__bd{
- background: url(https://www.itit123.cn/image/meBack.jpg) no-repeat;
- background-size:cover;
- }
js代碼：
- var util = require('../../utils/util.js');
- var app = getApp();
- Page({
- data: {
- userImg: "../../images/pic_160.png", // 頭像圖片路徑
- actionSheetHidden: true, // 是否顯示底部可選菜單
- actionSheetItems: [
- { bindtap: 'changeImage', txt: '修改頭像' },
- { bindtap: 'viewImage', txt: '查看頭像' }
- ] // 底部可選菜單
- },
- // 初始化加載獲取設(shè)備長寬
- onLoad: function (options) {
- var that = this;
- wx.getSystemInfo({
- success: function (res) {
- that.setData({
- windowHeight: res.windowHeight,
- windowWidth: res.windowWidth
- })
- }
- });
- },
- // 點(diǎn)擊頭像 顯示底部菜單
- clickImage: function () {
- var that = this;
- that.setData({
- actionSheetHidden: !that.data.actionSheetHidden
- })
- },
- // 點(diǎn)擊其他區(qū)域 隱藏底部菜單
- actionSheetbindchange: function () {
- var that = this;
- that.setData({
- actionSheetHidden: !that.data.actionSheetHidden
- })
- },
- // 上傳頭像
- changeImage: function () {
- var that = this;
- wx.chooseImage({
- count: 1, // 默認(rèn)9
- sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
- sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機(jī)，默認(rèn)二者都有
- success: function (res) {
- // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片，只有一張圖片獲取下標(biāo)為0
- var tempFilePaths = res.tempFilePaths[0];
- that.setData({
- userImg: tempFilePaths,
- actionSheetHidden: !that.data.actionSheetHidden
- })
- util.uploadFile('/itdragon/uploadImage', tempFilePaths, 'imgFile' ,{}, function (res) {
- console.log(res);
- if (null != res) {
- that.setData({
- userImg: res
- })
- } else {
- // 顯示消息提示框
- wx.showToast({
- title: '上傳失敗',
- icon: 'error',
- duration: 2000
- })
- }
- });
- }
- })
- },
- // 查看原圖
- viewImage: function () {
- var that = this;
- wx.previewImage({
- current: '', // 當(dāng)前顯示圖片的http鏈接
- urls: [that.data.userImg] // 需要預(yù)覽的圖片http鏈接列表
- })
- }
- });
utils.js代碼：
- //上傳文件
- function uploadFile(url, filePath, name, formData, cb) {
- console.log('a=' + filePath)
- wx.uploadFile({
- url: rootDocment + url,
- filePath: filePath,
- name: name,
- header: {
- 'content-type': 'multipart/form-data'
- }, // 設(shè)置請求的 header
- formData: formData, // HTTP 請求中其他額外的 form data
- success: function (res) {
- if (res.statusCode == 200 && !res.data.result_code) {
- return typeof cb == "function" && cb(res.data)
- } else {
- return typeof cb == "function" && cb(false)
- }
- },
- fail: function () {
- return typeof cb == "function" && cb(false)
- }
- })
- }
后臺服務(wù)器代碼：
- @RequestMapping("uploadImage")
- @ResponseBody
- public String uploadHeadImage(HttpServletRequest request, @RequestParam(value = "imgFile" , required=false) MultipartFile imageFile) {
- try {
- System.out.println("imageFile :::: " + imageFile);
- String realPath = request.getSession().getServletContext().getRealPath("/");
- if(imageFile!=null){
- if(GenerateUtils.allowUpload(imageFile.getContentType())){
- String fileName = GenerateUtils.rename(imageFile.getOriginalFilename());
- String saveName = fileName.substring(0,fileName.lastIndexOf("."));
- File dir = new File(realPath + "image");
- if(!dir.exists()){
- dir.mkdirs();
- }
- File file = new File(dir,saveName+".jpg");
- imageFile.transferTo(file);
- return "https://www.itit123.cn/sierew/image/"+file.getName();
- }
- }
- } catch (Exception e) {
- e.printStackTrace();
- }
- return "null";
- }
最后是有關(guān)頭像裁剪的問題，沒有找到合適的解決方法。不能在選擇圖片的時(shí)候進(jìn)行裁剪，如果有知道的朋友請賜教。還有一種是圖片選擇后裁剪?？梢詤⒖?nbsp;weCropper.js 地址：https://github.com/dlhandsome/we-cropper
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
碼云倉庫:
本文地址：http://m.chqfk.com/wxmini/doc/course/18092.html 復(fù)制鏈接
如需定制請聯(lián)系易優(yōu)客服咨詢： 點(diǎn)擊咨詢
