微信小程序上传头像的临时路径,持久化保存到服务器与数据库(nodejs后台开发)
创始人
2025-01-20 01:32:44
0次

从微信小程序中返回的用户头像临时地址 http://tmp/H0GP7BW5HTQs846c0d9deef32d42f2203340efc4a5c3.jpeg 会失效,且只能一段时间内在微信访问,并且无法在公网访问用户头像临时地址avatarUrl。

所以需要将临时地址avatarUrl转成实际可用的地址保存到mysql数据库的wxusers表的avatarUrl列中,同时将新的图片路径保存到服务器的./public/upload目录下。

一开始我是这么写的:

微信小程序通过授权获取用户头像的wxml代码如下

      


对应的微信小程序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;

接下来是第二次修改的,微信开发者工具在本地测试没有问题:

微信小程序通过授权获取用户头像的wxml代码如下:

    {theme}}" class="view-2">    


对应的微信小程序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;

本地运行后微信开发者显示下面的内容:

 然后将服务搬到服务器上运行之后,开始报错:

 目前解决办法我也已经找到了:点击阅读完美解决方案icon-default.png?t=N6B9http://t.csdn.cn/nI1pI

相关内容

热门资讯

实测交流透视挂!宝玛大厅ai智... 实测交流透视挂!宝玛大厅ai智能透视挂教程,宝玛大厅破解软件经验(本来有挂辅助)1、每一步都需要思考...
总算了解辅助器!朱雀吴江三缺一... 总算了解辅助器!朱雀吴江三缺一ai智能透视辅助挂技巧,朱雀吴江三缺一好像是有挂(有辅助挂细节)朱雀吴...
今日公布透视!九五至尊大厅ai... 今日公布透视!九五至尊大厅ai智能透视插件,九五至尊大厅有没有透视挂窍门(切实有挂技术)1、在九五至...
玩家必看科普开挂!聚闲麻将ai... 玩家必看科普开挂!聚闲麻将ai智能透视辅助挂软件,聚闲麻将总是真的有挂(有辅助挂方式)聚闲麻将能透视...
据报道开挂!旅游娱乐ai智能开... 据报道开挂!旅游娱乐ai智能开挂工具,旅游娱乐辅助工具演示(一直有挂教学)1、全新机制【旅游娱乐ai...
一分钟揭秘开挂!决胜朋来麻将a... 一分钟揭秘开挂!决胜朋来麻将ai智能透视辅助挂教程,决胜朋来麻将真是真的是有挂(有辅助挂总结)1、首...
如何分辨真伪透视!红牛ai智能... 如何分辨真伪透视!红牛ai智能透视攻略,红牛是不是有挂经验(真是有挂技术)1、操作简单,无需红牛手机...
2分钟细说辅助器!江湖大庆麻将... 2分钟细说辅助器!江湖大庆麻将ai智能透视辅助挂攻略,江湖大庆麻将竟然是真的有挂(有辅助挂头条)1、...
总算清楚透视挂!老夫子厅ai智... 总算清楚透视挂!老夫子厅ai智能透视挂技巧,老夫子厅怎么开挂课程(好像发现有挂)老夫子厅破解侠是真的...
解密关于辅助!菜鸟麻将ai智能... 解密关于辅助!菜鸟麻将ai智能透视辅助挂脚本,菜鸟麻将总是存在有挂(有辅助挂存在)1、用户打开应用后...