从微信小程序中返回的用户头像临时地址 http://tmp/H0GP7BW5HTQs846c0d9deef32d42f2203340efc4a5c3.jpeg 会失效,且只能一段时间内在微信访问,并且无法在公网访问用户头像临时地址avatarUrl。所以需要将临时地址avatarUrl转成实际可用的地址保存到mysql数据库的wxusers表的avatarUrl列中,同时将新的图片路径保存到服务器的./public/upload目录下。
有没有能帮我修改下面的代码的技术员:
微信小程序通过授权获取用户头像的wxml代码如下
<view class="btnavatar">
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar" value='{{avatarUrl}}'>
<view>
<image class="avatar" src="{{avatarUrl}}"></image>
</view>
</button>
</view>
对应的微信小程序TS代码如下
onChooseAvatar(e) {
const { avatarUrl } = e.detail
this.setData({
avatarUrl,
})
console.log("获取到用户输入的头像为"+ avatarUrl)
// 登录
var that = this;
wx.login({
success: function(res) {
//console.log(res.code)
// 发送 res.code 到后台换取 openId, sessionKey, unionId
if (res.code){
wx.request({
url: config.apiUrl + '/api/getOpenid',
method: 'POST',
data:{
code:res.code,
},
success:function(response){
console.log("成功获取到用户openid 下面开始获取头像:",response.data.openid)
const openid = response.data.openid;
wx.request({
url: config.apiUrl + '/api/avatarUrl',
method: 'POST',
data: {
openid,
avatarUrl,
},
success: function(res) {
console.log('submit success');
console.log("成功获取到用户头像存入数据库:",avatarUrl)
},
fail: function(res) {
console.log('submit fail');
}
})
}
})
}else{
console.log('wx.login()调用失败!'+res.errMsg);
}
}
})
},
以nodejs为后台保存头像到mysql数据库的路由代码如下
const express = require('express');
const router = express.Router();
const sql = require('../sql');
const request = require("request");
//存入头像
router.post('/avatarUrl', (req, res) => {
const openid = req.body.openid;
const avatarUrl = req.body.avatarUrl;
const nickname = req.body.nickname;
const phoneNumber = req.body.phoneNumber;
const unionid = req.body.unionid;
// 创建MySQL查询
const sqlStr = 'SELECT * FROM wxusers WHERE openid = ?';
//res.json({openid: openid});
console.log(`查询到了`)
// 查询数据库
sql.query(sqlStr, [openid], function(err, result) {
if (err) {
console.error(err);
res.status(500).send('Database error');
} else {
// 检查是否有匹配的openId
if (result.length > 0) {
const sqlStr = `UPDATE wxusers SET avatarUrl = '${avatarUrl}' WHERE openid = '${openid}'`;
sql.query(sqlStr, (err, result) => {
if (err) throw err;
res.send('Data updated in the database.');
});
} else {
const sqlStr = `INSERT INTO wxusers (openid, avatarUrl, nickname, phoneNumber, unionid) VALUES ('${openid}','${avatarUrl}', 'default_user', 'default_user', 'default_user')`;
sql.query(sqlStr, [openid, avatarUrl, nickname, phoneNumber, unionid], (err, result) => {
if (err) throw err;
res.send('Data inserted into the database.');
});
}
}
});
});
module.exports = router;
我可以,找我提问就行
根据您的需求,需要将微信小程序获取到的用户头像临时地址转存到服务器,并将转存后的地址保存到MySQL数据库的wxusers表中。同时,您还需要将新的图片路径保存到服务器的./public/upload目录下。
下面是对微信小程序TS代码和Node.js后台路由代码的修改:
onChooseAvatar(e) {
const { avatarUrl } = e.detail;
this.setData({
avatarUrl,
});
console.log("获取到用户输入的头像为" + avatarUrl);
// 登录
var that = this;
wx.login({
success: function (res) {
if (res.code) {
wx.request({
url: config.apiUrl + '/api/getOpenid',
method: 'POST',
data: {
code: res.code,
},
success: function (response) {
console.log("成功获取到用户openid 下面开始获取头像:", response.data.openid);
const openid = response.data.openid;
// 将头像临时地址上传到后台并转存到服务器和数据库
wx.uploadFile({
url: config.apiUrl + '/api/uploadAvatar',
filePath: avatarUrl,
name: 'avatar',
formData: {
openid: openid,
},
success: function (res) {
console.log("成功获取到用户头像存入服务器和数据库:", res.data);
// 这里可以处理上传成功后的逻辑
},
fail: function (res) {
console.log('上传头像失败:', res);
}
});
},
});
} else {
console.log('wx.login()调用失败!' + res.errMsg);
}
},
});
},
const express = require('express');
const router = express.Router();
const sql = require('../sql');
const fs = require('fs');
// 存入头像
router.post('/avatarUrl', (req, res) => {
const openid = req.body.openid;
const avatarUrl = req.files.avatar.path; // 获取上传的头像文件临时路径
const nickname = req.body.nickname;
const phoneNumber = req.body.phoneNumber;
const unionid = req.body.unionid;
// 创建MySQL查询
const sqlStr = 'SELECT * FROM wxusers WHERE openid = ?';
console.log(`查询到了`);
// 查询数据库
sql.query(sqlStr, [openid], function (err, result) {
if (err) {
console.error(err);
res.status(500).send('Database error');
} else {
// 检查是否有匹配的openId
if (result.length > 0) {
const sqlStr = `UPDATE wxusers SET avatarUrl = ? WHERE openid = ?`;
sql.query(sqlStr, [avatarUrl, openid], (err, result) => {
if (err) throw err;
res.send('Data updated in the database.');
});
} else {
const sqlStr = `INSERT INTO wxusers (openid, avatarUrl, nickname, phoneNumber, unionid) VALUES (?, ?, ?, ?, ?)`;
sql.query(sqlStr, [openid, avatarUrl, nickname, phoneNumber, unionid], (err, result) => {
if (err) throw err;
res.send('Data inserted into the database.');
});
}
}
});
});
// 头像上传和转存路由
router.post('/uploadAvatar', (req, res) => {
const openid = req.body.openid;
const tempPath = req.files.avatar.path; // 获取上传的头像文件临时路径
const uploadPath = `./public/upload/${openid}.jpeg`; // 定义头像在服务器上的上传路径和文件名,这里假设头像是jpeg格式
// 读取临时文件并保存到服务器指定路径
fs.readFile(tempPath, function (err, data) {
if (err) {
console.log('读取头像文件失败:', err);
return res.send('Failed to read avatar file.');
}
// 将头像数据写入服务器上的文件
fs.writeFile(uploadPath, data, function (err) {
if (err) {
console.log('保存头像文件失败:', err);
return res.send('Failed to save avatar file.');
}
// 删除临时文件
fs.unlink(tempPath, (err) => {
if (err) {
console.log('删除临时头像文件失败:', err);
}
});
// 返回上传后的头像路径
res.send(uploadPath);
});
});
});
module.exports = router;
以上修改将微信小程序的临时头像地址上传到服务器,并保存到./public/upload目录下,并将转存后的头像路径存入数据库中的avatarUrl列。请确保服务器上的./public/upload
目录存在,可以通过创建目录或者在启动时创建目录的方式来保证。
请注意,上述代码中使用了req.files
来获取上传的文件信息,因此需要确保您的后台服务器已经配置了相应的文件上传中间件(例如multer
),以及小程序的请求中带有Content-Type: multipart/form-data
头。