用户可以上传了和用户的face更新到数据库，接下来我们需要对图片进行展示，tomcat本身就提供了虚拟目录的概念，直接把某个路径的图片映射到web服务器作为资源路径。其实在springboot可以通过代码的方式来进行映射。源码：https://github.com/limingios/wxProgram.git 中No.15

api 中新建类

package com.idig8;import org.springframework.beans.factory.annotation.Value;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;@Configurationpublic class WebMvcConfig extends WebMvcConfigurerAdapter {    @Value("${server.face.path}")    private String fileSpace;    @Override    public void addResourceHandlers(ResourceHandlerRegistry registry) {        //资源的路径.swagger2的资源.所在的目录，        registry.addResourceHandler("/**")        .addResourceLocations("classpath:/META-INF/resources/")        .addResourceLocations("file:"+fileSpace);    }}

里面调用了wx api的插件，所以直接用this.setData就会报错。VM708:1 thirdScriptError
Cannot read property ‘setData’ of null;at pages/mine/mine onShow function;at api uploadFile success callback function
TypeError: Cannot read property ‘setData’ of null 需要先将this复制给一个变量，然后通过变量.setData

// pages/mine/mine.jsconst app = getApp()Page({  /**   * 页面的初始数据   */  data: {    faceUrl: "../../resource/images/noneface.png",    nickname: "昵称",    fansCounts: 0,    followCounts: 0,    receiveLikeCounts: 0,  },  /**   * 用户注销   */  logout:function(e){    var user = app.userInfo;    wx.showLoading({      title: '正在注销中。。。'    });    wx.request({      url: app.serverUrl + "/logout?userId="+user.id,      method: "POST",      header: {        'content-type': 'application/json' // 默认值      },      success: function (res) {        console.log(res.data);        var status = res.data.status;        wx.hideLoading();        if (status == 200) {          wx.showToast({            title: "用户注销成功~！",            icon: 'none',            duration: 3000          })          app.userInfo = null;          wx.redirectTo({            url: '../userRegister/userRegister',          })        } else if (status == 500) {          wx.showToast({            title: res.data.msg,            icon: 'none',            duration: 3000          })        }      }    })  },  /**   * 头像上传   */  uploadFace:function(e){    var user = app.userInfo;    var me = this;    wx.chooseImage({      count: 1, // 默认9      sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有      sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有      success: function (res) {        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片        var tempFilePaths = res.tempFilePaths        if (tempFilePaths.length>0){          console.log(tempFilePaths[0]);          wx.showLoading({            title: '正在加载中。。。'          });          wx.chooseImage({            success: function (res) {              var tempFilePaths = res.tempFilePaths              wx.uploadFile({                url: app.serverUrl + "/user/uploadFace?userId=" + user.id, //仅为示例，非真实的接口地址                filePath: tempFilePaths[0],                name: 'file',                success: function (res) {                  var data = JSON.parse(res.data);                  console.log(data);                   wx.hideLoading();                  if (data.status == 200) {                    wx.showToast({                      title: "用户上传成功~！",                      icon: 'none',                      duration: 3000                    })                    me.setData({                      faceUrl: app.serverUrl+data.data                    })                  } else if (data.status == 500) {                    wx.showToast({                      title: data.msg,                      icon: 'none',                      duration: 3000                    })                  }                }              })            }          })        }      }    })  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {  },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function () {  },  /**   * 生命周期函数--监听页面显示   */  onShow: function () {  },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function () {  },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function () {  },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function () {  },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function () {  },  /**   * 用户点击右上角分享   */  onShareAppMessage: function () {  }})

点击手机预览

手机扫描，进行登录
>但是始终无法登录

在手机上如何像工具一样正常登录呢？
>1. 手机app 和 后台 在同一个网段，也就是同一个wifi
>2. 打开调试模式，重启登录小程序
>3. 还有个不在同一个wifi的话，可以通过内网穿透的方式，之前说过，但是app.js里面设置下内网穿透的ip

PS：这次试用itools的方式在手机也演示了如何进行图片的选择和上传。wx的插件做的很棒，直接引用不会存在各种问题。稳~！

>>原创文章，欢迎转载。转载请注明：转载自IT人故事会，谢谢！
>>原文链接地址：「小程序JAVA实战」小程序头像图片上传（中）（44）