E企盈营销工具技术服务商 热线:4006-838-530

微信小程序入门八头像上传

E企盈直播平台营销卖货系统

上一章介绍了微信小程序入门七登录注册,这章谈谈头像的选择,上传,预览以及后台服务端代码的功能。本章节主要用的知识点有1. action-sheet 底部弹出可选菜单组件2. wx.uploadFile 将本地资源上传到服务器3. wx.chooseImage 从本地相册选择图片或使用相机拍照。4. wx.previewImage 预览图片效果图:wxml代码:!–变量说明:windowHeight :设备的窗口的高度windowWidth : 设备的窗口的宽度actionSheetHidden : 组件是否显示actionSheetItems :组件菜单项–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”                点击登录/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”发布博客/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”详细信息/view        /view        view class=”weui-cell weui-cell_access”            view class=”weui-cell__bd”                view style=”display: inline-block; vertical-align: middle”个人资料/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            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/viewwxss代码:.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: ‘查看头像’ }        ] // 底部可选菜单    },    // 初始化加载获取设备长宽    onLoad: function (options) {        var that = this;        wx.getSystemInfo({            success: function (res) {                that.setData({                    windowHeight: res.windowHeight,                    windowWidth: res.windowWidth                })            }        });    },    // 点击头像 显示底部菜单    clickImage: function () {        var that = this;        that.setData({            actionSheetHidden: !that.data.actionSheetHidden        })    },    // 点击其他区域 隐藏底部菜单    actionSheetbindchange: function () {        var that = this;        that.setData({            actionSheetHidden: !that.data.actionSheetHidden        })    },    // 上传头像    changeImage: function () {        var that = this;        wx.chooseImage({            count: 1, // 默认9            sizeType: [‘original’, ‘compressed’], // 可以指定是原图还是压缩图,默认二者都有            sourceType: [‘album’, ‘camera’], // 可以指定来源是相册还是相机,默认二者都有            success: function (res) {                // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片,只有一张图片获取下标为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: ”, // 当前显示图片的http链接            urls: [that.data.userImg] // 需要预览的图片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’    }, // 设置请求的 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)    }  })}后台服务器代码:@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”;    }最后是有关头像裁剪的问题,没有找到合适的解决方法。不能在选择图片的时候进行裁剪,如果有知道的朋友请赐教。还有一种是图片选择后裁剪。可以参考 weCropper.js 地址:https://github.com/dlhandsome/we-cropper微信小程序系统学习地址:微信小程序入门教程

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序入门八头像上传
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏