微信小程序(三)-图片上传至后台以及缓存设置

图片的上传功能

今天把注册界面进行了一次全新优化，新功能就是用户可以提交头像。这个功能属实不容易整，我先上微信小程序端的代码

/**
   * Author:Leo
   * Time:2019年11月14日10:38:12
   * desc:上传头像到服务端
   */
  uploadimg: function() {
    var that = this;
    wx.chooseImage({
      count: 1,
      sizeType: ["compressed"],
      sourceType: ["album", "camera"],
      success: function(res) {
        var temppath = res.tempFilePaths;
        console.log("选择的图片为：", temppath);
        that.setData({
          imgpath: temppath[0]
        });
        uploadimg(that, temppath[0]);
      },
    })

    function uploadimg(page, path) {
      wx.showToast({
          icon: 'loading',
          title: '正在上传',
        }),
        wx.uploadFile({
          url: app.globalData.server + '/api/user/uploadimg',
          filePath: path,
          name: 'fileimg',
          header: {
            "content-type": "multipart/form-data"
          },
          success: function(res) {
            console.log(res.data);
            //这里直接用that大概是因为这个自定义的函数在上面uploadimg有了回调，而uploadimg函数
            //已经定义了that，所以下面就直接使用that
            that.setData({
              imgname:'/images/tximg/'+res.data
            })
          }
        })
    }
  },

与之对接的后端，也是我从百度上荡下来修改了一下

	@ResponseBody
    @RequestMapping(value = "/uploadimg", method = RequestMethod.POST, consumes ="multipart/form-data")
    public String getFile(@RequestParam("fileimg") MultipartFile file)
    {
        log.info("收到请求");
        if (file.isEmpty()) {
            return "上传失败，请选择文件";
        }
        String fileName=file.getOriginalFilename();
        //String fileName = UUID.randomUUID().toString().replaceAll("-", "").toUpperCase();
        log.info("文件名为："+fileName);
        String suffixName = fileName.substring(fileName.lastIndexOf("."));
        log.info("文件的后缀名为：" + suffixName);
        String newfileName=UUID.randomUUID().toString()
                .replaceAll("-", "")
                .toUpperCase()
                +System.currentTimeMillis()
                +suffixName;
        log.info("新的名称->"+newfileName);

        String filePath = "C:\\ideaIU-2018.2.6.win\\workspace\\wxcx\\src\\main\\" +
                "resources\\static\\images\\tximg\\";
        File dest = new File(filePath + newfileName);
        log.info("dest->"+dest);
        try {
            file.transferTo(dest);
            log.info("上传成功");
            return newfileName;
        } catch (IOException e) {
            log.warn("上传失败");
            log.warn(e.getMessage());
        }
        return "上传失败！";
    }

主要是小程序那端，到现在为止我都还没有完全的理解，属实真秀！倒是后端理解的很快，springboot做图片上传可以说相当方便了，我这里其实也就是重新换了个名字，防止重复或者后台读取上存在一些问题。
至于小程序的前端那里，我后面还是会好好分析的，多查查小程序官方文档，多百度百度。我这里只是把实现的功能代码拿出来而已，方便自己后用。

微信小程序的页面间传参

我今天做个人页面展示的时候，遇到了一个思路障碍。就是我要加载属于这个人的信息，那么就要给后台传这个人的姓名(我的SQL就是这么写的，名字那里是唯一的，后台有校验重复功能)，但是这个姓名参数从哪里来了？我当时想到的是用data-，但是很快就被我否了，因为这个有一定的局限性，因为如果用它的话，我就必须要把这两个界面进行跳转连接，然后才能在对应的onLoad里面取。所以我又开始进行了疯狂的百度，很快就找到了解决的帖子，看来遇到跟我类似的问题还是有很多人的。大佬们总结了大概六七个方法，我这里就先简单列举两个。

1. 设置全局变量
在app.js里面有个userInfo: null,我的实现思路就是当用户登录成功之后，给这个全局的userInfo赋值为当前用户的登录名，实现代码也很简单

var name = e.detail.value.name;
app.globalData.userInfo = name;
console.log('app.globalData.userInfo:' + app.globalData.userInfo);

我这里是有选择的截取的，但是实现的主要核心代码就是这个。
2. 设置缓存
微信小程序设置缓存，这还是我第一次玩，好像还很香的样子，代码如下

wx.setStorage({
            key: 'userInfo',
            data: name
          })//设置缓存

wx.getStorage({
      key: 'userInfo',
      success: function(res) {
        console.log(res.data);
        }
}）//获取缓存

这里说一下，我在之前设置全局变量的时候，在onLoad、onReady和onShow三个函数里都进行了打印，结果这两种情况都只在onShow里面打印出结果，小程序的生命周期还是没搞懂啊太绕人。
解决方法的来源：https://www.jianshu.com/p/0135769db89c和https://blog.csdn.net/YZi_Angel/article/details/80568411

后面对模板的使用和函数的封装也会进行研究，加油！