「小程序JAVA实战」小程序头像图片上传(中)(44)
用户可以上传了和用户的face更新到数据库,接下来我们需要对图片进行展示,tomcat本身就提供了虚拟目录的概念,直接把某个路径的图片映射到web服务器作为资源路径。其实在springboot可以通过代码的方式来进行映射。源码:https://github.com/limingios/wxProgram.git 中No.15
创新互联公司是一家以网络技术公司,为中小企业提供网站维护、成都做网站、网站设计、网站备案、服务器租用、域名申请、软件开发、微信小程序等企业互联网相关业务,是一家有着丰富的互联网运营推广经验的科技公司,有着多年的网站建站经验,致力于帮助中小企业在互联网让打出自已的品牌和口碑,让企业在互联网上打开一个面向全国乃至全球的业务窗口:建站欢迎联系:18982081108
spring boot 映射路径的设置
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; @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); } }
小程序的图片展示
里面调用了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.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)
本文名称:「小程序JAVA实战」小程序头像图片上传(中)(44)
分享网址:http://scjbc.cn/article/pejeds.html