微信小程序上传头像的暂时路径，持久化生存到服务器与数据库（nodejs配景开 ...

宁睿  金牌会员 | 2024-8-29 01:13:48 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 567|帖子 567|积分 1709

从微信小程序中返回的用户头像暂时地点 http://tmp/H0GP7BW5HTQs846c0d9deef32d42f2203340efc4a5c3.jpeg 会失效，且只能一段时间内在微信访问，而且无法在公网访问用户头像暂时地点avatarUrl。
所以必要将暂时地点avatarUrl转成实际可用的地点生存到mysql数据库的wxusers表的avatarUrl列中，同时将新的图片路径生存到服务器的./public/upload目录下。
一开始我是这么写的：

微信小程序通过授权获取用户头像的wxml代码如下
  1. <view class="btnavatar">
  2.     <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"  value='{{avatarUrl}}'>
  3.    <view>
  4.     <image class="avatar" src="{{avatarUrl}}"></image>
  5.    </view>
  6.   </button>
  7. </view>
复制代码

对应的微信小程序TS代码如下
  1. onChooseAvatar(e) {
  2. const { avatarUrl } = e.detail 
  3. this.setData({
  4.   avatarUrl,
  5. })
  6. console.log("获取到用户输入的头像为"+ avatarUrl)
  7.      // 登录
  8.      var that = this;
  9.      wx.login({
  10.          success: function(res) {
  11.              //console.log(res.code)
  12.              // 发送 res.code 到后台换取 openId, sessionKey, unionId
  13.              if (res.code){
  14.                  wx.request({
  15.                      url: config.apiUrl + '/api/getOpenid',
  16.                      method: 'POST',
  17.                      data:{
  18.                          code:res.code,
  19.                      },
  20.                      success:function(response){
  21.                          console.log("成功获取到用户openid 下面开始获取头像:",response.data.openid)
  22.                          const openid = response.data.openid;
  23. wx.request({
  24.     url: config.apiUrl + '/api/avatarUrl',
  25.     method: 'POST',
  26.     data: {
  27.         openid,
  28.         avatarUrl,
  29.     },
  30.     success: function(res) {
  31.         console.log('submit success');
  32.         console.log("成功获取到用户头像存入数据库:",avatarUrl)
  33.     },
  34.     fail: function(res) {
  35.         console.log('submit fail');
  36.     }
  37. })
  38. }
  39. })
  40. }else{
  41. console.log('wx.login()调用失败！'+res.errMsg);
  42. }
  43. }
  44. })
  45. },
复制代码

以nodejs为配景生存头像到mysql数据库的路由代码如下
  1. const express = require('express');
  2. const router = express.Router();
  3. const sql = require('../sql');
  4. const request = require("request");
  5. //存入头像
  6. router.post('/avatarUrl', (req, res) => {
  8.     const openid = req.body.openid;
  9.     const avatarUrl = req.body.avatarUrl;
  10.     const nickname = req.body.nickname;
  11.     const phoneNumber = req.body.phoneNumber;
  12.     const unionid = req.body.unionid;
  14.     // 创建MySQL查询
  15.     const sqlStr = 'SELECT * FROM wxusers WHERE openid = ?';
  16.     //res.json({openid: openid});
  17.     console.log(`查询到了`)
  18.     // 查询数据库
  19.     sql.query(sqlStr, [openid], function(err, result) {
  20.         if (err) {
  21.             console.error(err);
  22.             res.status(500).send('Database error');
  23.         } else {
  24.             // 检查是否有匹配的openId
  25.             if (result.length > 0) {
  26.                 const sqlStr = `UPDATE wxusers SET avatarUrl = '${avatarUrl}' WHERE openid = '${openid}'`;
  27.                 sql.query(sqlStr, (err, result) => {
  28.                     if (err) throw err;
  29.                     res.send('Data updated in the database.');
  30.                 });
  31.             } else {
  32.                 const sqlStr = `INSERT INTO wxusers (openid, avatarUrl, nickname, phoneNumber, unionid) VALUES ('${openid}','${avatarUrl}', 'default_user', 'default_user', 'default_user')`;
  33.                 sql.query(sqlStr, [openid, avatarUrl, nickname, phoneNumber, unionid], (err, result) => {
  34.                     if (err) throw err;
  35.                     res.send('Data inserted into the database.');
  36.                 });
  37.             }
  38.         }
  39.     });
  41. });
  43. module.exports = router;
复制代码
接下来是第二次修改的，微信开发者工具在本地测试没有问题：

微信小程序通过授权获取用户头像的wxml代码如下：
  1.     <view data-weui-theme="{{theme}}" class="view-2">
  2.    <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"  value='{{avatarUrl}}'>
  3.    <view>
  4.     <image class="avatar" src="{{avatarUrl}}"></image>
  5.    </view>
  6.   </button>
复制代码

对应的微信小程序TS代码如下：
  1. onChooseAvatar(e) {
  2.     const { avatarUrl } = e.detail
  3.     this.setData({
  4.     avatarUrl,
  5.     })
  6.     console.log("获取到用户头像avatarUrl："+ avatarUrl)
  7.     // 下载头像图片
  8.     wx.downloadFile({
  9.     url: avatarUrl,
  10.     success(res) {
  11.     if (res.statusCode === 200) {
  12.     console.log('download success');
  13.     const tempFilePath = res.tempFilePath
  14.     console.log("获取到用户头像tempFilePath："+ tempFilePath)
  15.     // 上传下载的图片
  16.     wx.uploadFile({
  17.     url: config.apiUrl + '/api/avatarUrl',
  18.     filePath: tempFilePath,
  19.     name: 'file',
  20.     formData: {
  21.     'openid': wx.getStorageSync('openid')
  22.     },
  23.     success(res) {
  24.     const data = JSON.parse(res.data)
  25.     console.log('upload success');
  26.     console.log("成功获取到用户头像存入数据库:", data.path);
  27.     },
  28.     fail(res) {
  29.     console.log('upload fail');
  30.     }
  31.     })
  32.     }
  33.     }
  34.     })
  35.     },
复制代码

以nodejs为配景生存头像到mysql数据库的路由代码如下：
  1. const express = require('express');
  2. const router = express.Router();
  3. const sql = require('../sql');
  4. const multer = require('multer');
  6. // 设置文件上传的目录
  7. const storage = multer.diskStorage({
  8.     destination: function(req, file, cb) {
  9.         cb(null, './public/upload')
  10.     },
  11.     filename: function(req, file, cb) {
  12.         cb(null, Date.now() + '-' + file.originalname)
  13.     }
  14. })
  16. const upload = multer({ storage: storage })
  18. router.post('/avatarUrl', upload.single('file'), (req, res) => {
  19.     const openid = req.body.openid;
  20.     const avatarUrl = '/upload/' + req.file.filename;
  22. // 创建MySQL查询
  23.     const sqlStr = 'SELECT * FROM wxusers WHERE openid = ?';
  25. // 查询数据库
  26.     sql.query(sqlStr, [openid], function(err, result) {
  27.         if (err) {
  28.             console.error(err);
  29.             res.status(500).send('Database error');
  30.         } else {
  31. // 检查是否有匹配的openId
  32.             if (result.length > 0) {
  33.                 const sqlStr = `UPDATE wxusers SET avatarUrl = '${avatarUrl}' WHERE openid = '${openid}'`;
  34.                 sql.query(sqlStr, (err, result) => {
  35.                     if (err) throw err;
  36.                     res.json({ path: avatarUrl });
  37.                 });
  38.                 console.log("更新新路径", avatarUrl);
  39.             } else {
  40.                 const sqlStr = `INSERT INTO wxusers (openid, avatarUrl) VALUES ('${openid}','${avatarUrl}')`;
  41.                 sql.query(sqlStr, [openid, avatarUrl], (err, result) => {
  42.                     if (err) throw err;
  43.                     res.json({ path: avatarUrl });
  44.                 });
  45.                 console.log("插入新路径", avatarUrl);
  46.             }
  47.         }
  48.     });
  49. });
  51. module.exports = router;
复制代码
本地运行后微信开发者表现下面的内容：

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

 目前解决办法我也已经找到了：点击阅读完美解决方案
http://t.csdn.cn/nI1pI

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

宁睿

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表