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

╰+哭是因爲堅強的太久メ 2022-07-03 13:56 175阅读 0赞

![aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvODA2OTU2LzIwMjAwNy84MDY5NTYtMjAyMDA3MzEyMzQ1MDc3MjItMTExNjgwOTkyMi5naWY][]

上一章介绍了[微信小程序入门七登录注册][Link 1]，这章谈谈头像的选择，上传，预览以及后台服务端代码的功能。本章节主要用的知识点有

1. action-sheet 底部弹出可选菜单组件

2. wx.uploadFile 将本地资源上传到服务器

3. wx.chooseImage 从本地相册选择图片或使用相机拍照。

4. wx.previewImage 预览图片

效果图：

![20170408231911409][]

wxml代码：

<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>
    </view>

wxss代码：

.page__bd{
        background: url(https://www.itit123.cn/image/meBack.jpg) no-repeat;
        background-size:cover;
    }

js代码：

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][https_github.com_dlhandsome_we-cropper]

微信小程序系统学习地址：[微信小程序入门教程][Link 2]

[aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvODA2OTU2LzIwMjAwNy84MDY5NTYtMjAyMDA3MzEyMzQ1MDc3MjItMTExNjgwOTkyMi5naWY]: /images/20220618/f707c10c453b4bee80798216c9d4b9e9.png
[Link 1]: http://blog.csdn.net/qq_19558705/article/details/65935818
[20170408231911409]: /images/20220618/55bd79c2a8c64eb8b2c3368c6c11c49a.png
[https_github.com_dlhandsome_we-cropper]: https://github.com/dlhandsome/we-cropper
[Link 2]: http://www.itit123.cn/blog/detail/19.html