Users can upload the user's face and to update the database, then we need to show the picture, tomcat itself provides the concept of virtual directory, directly to the picture of a path mapping to the web server as a resource path. In fact, springboot can be mapped by means of the code. Source: https: //github.com/limingios/wxProgram.git in No.15
Mapping setting spring boot path
api in New Class
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;
@Configuration
public 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);
}
}
Pictures show the applet
Wx api calls inside the plug, so the error will be directly this.setData. VM708:. 1 thirdScriptError
Can Not Read Property 'the setData' of null; AT Pages / Mine / Mine onShow function; AT API the uploadFile Success the callback function
TypeError: Can Not Read Property 'the setData' of null need to be copied to a variable first this, then the variable .setData
// pages/mine/mine.js
const 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）