사용자의 얼굴을 업로드 할 수있는 데이터베이스를 업데이트하는 사용자, 우리는 바람둥이 자체가 직접 자원 경로로 웹 서버의 경로 매핑의 그림에, 가상 디렉토리의 개념을 제공하고, 그림을 표시해야합니다. 사실, springboot은 코드에 의해 매핑 할 수 있습니다. 출처 : HTTPS : 15 번에서 //github.com/limingios/wxProgram.git
매핑 설정 스프링 부팅 경로
새로운 클래스의 API를
패키지 com.idig8;
수입 org.springframework.beans.factory.annotation.Value;
수입 org.springframework.context.annotation.Configuration;
수입 org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
수입 org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
공용 클래스 WebMvcConfig는 WebMvcConfigurerAdapter {확장
@Value ( "$ {server.face.path}")
개인 문자열 파일 공간을;
@Override
공공 무효 addResourceHandlers (ResourceHandlerRegistry 레지스트리) {
//资源的路径.swagger2的资源所在的目录.
registry.addResourceHandler ( "/ **")
.addResourceLocations ( "클래스 경로 : / META-INF / 자원 /")
.addResourceLocations ( "파일 :"+ 파일 공간);
}
사진은 애플릿을 보여
플러그 내부 WX API 호출, 오류가 직접 this.setData 수 있도록. VM708 :. 1 thirdScriptError은
널 (null)의 '는 사항 setData을'속성을 읽을 수 없습니다; 페이지 / 광산 / 광산에서 onShow 기능 AT; API을 UploadFile 성공 콜백 함수의 AT
형식 오류 : 부동산의 널 (null) 필요 '는 사항 setData'먼저이 변수에 복사 할을 읽을 수 없습니다, 다음 변수 .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）