WeChat アプレットから返されたユーザーのアバターの一時アドレス http://tmp/H0GP7BW5HTQs846c0d9deef32d42f2203340efc4a5c3.jpeg は無効になり、WeChat 上の一定期間内にのみアクセスできます。また、ユーザーのアバターの一時アドレス avatarUrlパブリックネットワークではアクセスできません。
したがって、一時アドレス avatarUrl を実際に使用できるアドレスに変換し、mysql データベースの wxusers テーブルの avatarUrl 列に保存し、同時に新しい画像パスを ./public/upload ディレクトリに保存する必要があります。サーバーの。
最初に私はこう書きました:
WeChat アプレットが認証を通じてユーザー アバターを取得するための 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>
対応する WeChat アプレット 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;次は 2 番目の修正ですが、WeChat 開発者ツールはローカル テストでは問題ありません。
WeChat アプレットが認証を通じてユーザーのアバターを取得するための wxml コードは次のとおりです。
<view data-weui-theme="{
{theme}}" class="view-2">
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar" value='{
{avatarUrl}}'>
<view>
<image class="avatar" src="{
{avatarUrl}}"></image>
</view>
</button>
対応する WeChat アプレット TS コードは次のとおりです。
onChooseAvatar(e) {
const { avatarUrl } = e.detail
this.setData({
avatarUrl,
})
console.log("获取到用户头像avatarUrl："+ avatarUrl)
// 下载头像图片
wx.downloadFile({
url: avatarUrl,
success(res) {
if (res.statusCode === 200) {
console.log('download success');
const tempFilePath = res.tempFilePath
console.log("获取到用户头像tempFilePath："+ tempFilePath)
// 上传下载的图片
wx.uploadFile({
url: config.apiUrl + '/api/avatarUrl',
filePath: tempFilePath,
name: 'file',
formData: {
'openid': wx.getStorageSync('openid')
},
success(res) {
const data = JSON.parse(res.data)
console.log('upload success');
console.log("成功获取到用户头像存入数据库:", data.path);
},
fail(res) {
console.log('upload fail');
}
})
}
}
})
},
バックグラウンドとしてnodejsを使用してアバターをmysqlデータベースに保存するためのルーティングコードは次のとおりです。
const express = require('express');
const router = express.Router();
const sql = require('../sql');
const multer = require('multer');
// 设置文件上传的目录
const storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, './public/upload')
},
filename: function(req, file, cb) {
cb(null, Date.now() + '-' + file.originalname)
}
})
const upload = multer({ storage: storage })
router.post('/avatarUrl', upload.single('file'), (req, res) => {
const openid = req.body.openid;
const avatarUrl = '/upload/' + req.file.filename;
// 创建MySQL查询
const sqlStr = 'SELECT * FROM wxusers WHERE openid = ?';
// 查询数据库
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.json({ path: avatarUrl });
});
console.log("更新新路径", avatarUrl);
} else {
const sqlStr = `INSERT INTO wxusers (openid, avatarUrl) VALUES ('${openid}','${avatarUrl}')`;
sql.query(sqlStr, [openid, avatarUrl], (err, result) => {
if (err) throw err;
res.json({ path: avatarUrl });
});
console.log("插入新路径", avatarUrl);
}
}
});
});
module.exports = router;ローカルで実行すると、WeChat 開発者は次のコンテンツを表示します。
次に、サービスをサーバーに移動して実行すると、エラーが表示され始めました。
現在の解決策も見つかりました。クリックして完璧な解決策を読んでください
http://t.csdn.cn/nI1pI