原創(chuàng)文章者春，歡迎轉(zhuǎn)載。轉(zhuǎn)載請注明：轉(zhuǎn)載自IT人故事會盏触，謝謝愉耙！
原文鏈接地址：「小程序JAVA實(shí)戰(zhàn)」小程序頭像圖片上傳（中）（44）
用戶可以上傳了和用戶的face更新到數(shù)據(jù)庫贮尉，接下來我們需要對圖片進(jìn)行展示，tomcat本身就提供了虛擬目錄的概念朴沿，直接把某個路徑的圖片映射到web服務(wù)器作為資源路徑猜谚。其實(shí)在springboot可以通過代碼的方式來進(jìn)行映射。源碼：https://github.com/limingios/wxProgram.git 中wx-springboot 和 No.15
spring boot 映射路徑的設(shè)置
- 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);
}
}
小程序的圖片展示
里面調(diào)用了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復(fù)制給一個變量坚芜，然后通過變量.setData
// pages/mine/mine.js
const app = getApp()
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
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' // 默認(rèn)值
},
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, // 默認(rèn)9
sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
sourceType: ['album'], // 可以指定來源是相冊還是相機(jī)缚忧，默認(rèn)二者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表悟泵，tempFilePath可以作為img標(biāo)簽的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, //僅為示例，非真實(shí)的接口地址
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
})
}
}
})
}
})
}
}
})
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {
}
})
手機(jī)端查看效果
- 點(diǎn)擊手機(jī)預(yù)覽
- 手機(jī)掃描朽肥，進(jìn)行登錄
但是始終無法登錄
- 在手機(jī)上如何像工具一樣正常登錄呢禁筏？
- 手機(jī)app 和 后臺 在同一個網(wǎng)段，也就是同一個wifi
- 打開調(diào)試模式鞠呈，重啟登錄小程序
- 還有個不在同一個wifi的話，可以通過內(nèi)網(wǎng)穿透的方式右钾，之前說過蚁吝，但是app.js里面設(shè)置下內(nèi)網(wǎng)穿透的ip
PS：這次試用itools的方式在手機(jī)也演示了如何進(jìn)行圖片的選擇和上傳。wx的插件做的很棒舀射，直接引用不會存在各種問題窘茁。穩(wěn)~！
