eggjs 怎么实现更新用户信息接口去更新上传头像信息?

简介: eggjs 怎么实现更新用户信息接口去更新上传头像信息?

在此之前,先补充一下上一节的一个知识点 path.extname,知道的忽略就行



path.extname


返回path路径文件扩展名

  • 如果path以 ‘.’ 为结尾,将返回 ‘.’,
  • 如果无扩展名 又 不以’.'结尾,将返回空值。
path.extname('kaimo.html'); // 返回 '.html'
path.extname('kaimo.'); // 返回 '.'
path.extname('kaimo'); // 返回 ''


1、修改上传头像接口的返回值


这里我们采用 uuid 返回图片名称


使用 uuid 修改


可以找到我们依赖里的 uuid 的 readme 文档。

f456a1e46fbb4474981137aa11e115de.png

'use strict';
const fs = require('fs');
const path = require('path');
const moment = require('moment');
const mkdirp = require('mkdirp');
const uuidv1 = require('uuid/v1');
const Controller = require('egg').Controller;
class UploadController extends Controller {
  async uploadAvatar () {
    const { ctx, config } = this;
    try {
      // 0、获取文件
      let file = ctx.request.files[0];
      console.log('获取文件', file);
      // ctx.request.files[0] 表示获取第一个文件,若前端上传多个文件则可以遍历这个数组对象
      let fileData = fs.readFileSync(file.filepath);
      // 1、获取当前日期
      let day = moment(new Date()).format('YYYYMMDD');
      console.log('1、获取当前日期', day);
      // 2、创建图片保存的路径
      let dir = path.join(config.uploadAvatarDir, day);
      console.log('2、创建图片保存的路径', dir);
      // 3、创建目录
      await mkdirp(dir);
      // 4、生成路径返回
      let temp_uuid = uuidv1(); // uuid
      let file_name = day + "_" + temp_uuid + path.extname(file.filename); // 图片文件名称
      let tempDir = path.join(dir, file_name); // 返回图片保存的路径
      console.log('返回图片保存的路径', tempDir);
      // 5、写入文件夹
      fs.writeFileSync(tempDir, fileData);
      ctx.body = {
        status: 200,
        desc: '上传成功',
        data: file_name,
      }
    } catch(error) {
      ctx.body = {
        status: 500,
        desc: '上传失败',
        data: null
      }
    } finally {
      // 6、清除临时文件
      ctx.cleanupRequestFiles();
    }
  }
}
module.exports = UploadController;



2、测试一下使用的 uuid 效果

我们再次上传修勾勾,点击发送cb3eaffbd20c4df29ce63ab1ee1e3de9.png


接口返回:20220126_2ef176e0-7e76-11ec-8b21-6f640ada18ce.png

b0609c0f77e549759d3838b22b96fe46.png


D 盘的文件夹里也出现了图片


2af4c6a8ad2d41a5a41dda8ea7b32bbf.png



3、修改用户信息接口

测试成功之后我们需要将这个 20220126_2ef176e0-7e76-11ec-8b21-6f640ada18ce.png 保存到数据库去,这个图片文件的格式是,年月日 + uuid,这样做的目的是为了服务器去获取该图片返回给前端展示。此时我们需要通过修改用户信息接口把生成的 uuid 保存到用户信息里。


修改 user.js 里的更新用户信息接口,添加 avatar 参数

// 更新用户信息
async updateUserInfo() {
  const { ctx, app } = this;
  try {
    // 0、获取用户输入的 signature, avatar
    const { signature = '', avatar = '' } = ctx.request.body;
    // 1、获取请求头 authorization 属性,值为 token
    const token = ctx.request.header.authorization;
    // 2、用 app.jwt.verify(token, app.config.jwt.secret),解析出 token 的值
    const decode = await app.jwt.verify(token, app.config.jwt.secret);
    // 3、校验是否 token 可以,需要在鉴权中间件里加返回
    if(!decode) return;
    // 4、根据用户名,在数据库查找相对应的id操作
    const userInfo = await ctx.service.user.getUserByName(decode.username);
    // 5、通过 service 方法 updateUserInfo 修改 signature,avatar... 信息
    const result = await ctx.service.user.updateUserInfo({
      ...userInfo, 
      signature: signature || userInfo.signature,
      avatar: avatar || userInfo.avatar
    });
    console.log('userjs更新用户信息', signature, avatar);
    // 返回 token
    ctx.body = {
      status: 200,
      desc: '更新成功',
      data: {
        id: userInfo.id,
        username: userInfo.username,
        signature: signature || userInfo.signature,
        avatar: avatar || userInfo.avatar
      }
    };
  } catch (error) {
    ctx.body = {
      status: 500,
      desc: '更新失败',
      data: null
    }
  }
}



4、测试更新用户信息


修改完接口之后,我们手动测试一下:


  1. 假设用户已经上传了头像
  2. 上传接口也返回了文件名
  3. 然后用户点击保存的时候,调用更新接口把文件名保存到数据库


可以发现,接口调用成功了

9aad059d95584291a3e5e018208ca692.png


数据库里面也有了。


35b2befdbf2e499f8e1551f0f84f304f.png







目录
相关文章
|
8月前
|
开发工具 git
大事件项目19_个人中心_基本资料调接口更新保存
大事件项目19_个人中心_基本资料调接口更新保存
若依修改,修改代理线上接口登录后台,若依框架如何使用线上的接口,如何在本地获取网页上的接口
若依修改,修改代理线上接口登录后台,若依框架如何使用线上的接口,如何在本地获取网页上的接口
|
7月前
|
JavaScript
文本,视频网站提交的方法,配置提交的按钮,一次性提交的方法,Vue编写好代码向后台发送数据就行
文本,视频网站提交的方法,配置提交的按钮,一次性提交的方法,Vue编写好代码向后台发送数据就行
|
7月前
|
存储 JavaScript 前端开发
文本,三步走构思,富文本点击提交能够存储到数据库当中(下),最快的方法,还是会看资料,因此会整合资料最好,直接看资料最快,因为是JWT的资料,我们要设置好登录的内容,看登录的地方怎样写的
文本,三步走构思,富文本点击提交能够存储到数据库当中(下),最快的方法,还是会看资料,因此会整合资料最好,直接看资料最快,因为是JWT的资料,我们要设置好登录的内容,看登录的地方怎样写的
|
8月前
|
API 开发工具 git
大事件项目23---个人中心—更换头像——调用接口保存,并让Vuex更新
大事件项目23---个人中心—更换头像——调用接口保存,并让Vuex更新
|
9月前
|
存储 JavaScript
uniapp在不需要后端数据的情况下 怎么记录用户进一次记录一次
uniapp在不需要后端数据的情况下 怎么记录用户进一次记录一次
153 0
|
移动开发
微信h5扫码接口范例:多个扫码框支持的办法,通过引入一个参数来区分及使用localStorage保证之前扫到的数据不丢失
微信h5扫码接口范例:多个扫码框支持的办法,通过引入一个参数来区分及使用localStorage保证之前扫到的数据不丢失
138 0
|
存储 缓存 前端开发
用户信息、账号设置。换做是你会怎么做代码实现?
在网站的应用场景下,对于用户的信息展示与账号设置的都是一个绕不过的问题。解决这个问题,最重要的是,怎么拦截未登录用户进入这个功能内?这就意味着必须在每次动态请求时,校验登录状态以及让请求持有用户(在服务器端可查询到对应用户)。当然,我们必须考虑多线程并发的情况,简单地将用户信息放在一个公共的类或者一个容器内,可能会导致数据冲突。现在流行的做法就是利用拦截器去保证动态请求的合法性,而不是在重复造轮子式一次次检查,并且利用 ThreadLocal 进行数据线程隔离保护。本文就将介绍在拦截器的作用下,用户的信息展示与账户设置该如何正确地处理。当然,接下来,也会有更多更有技术力的文章等候着你,欢迎大家
86 0
|
中间件 数据库
eggjs 怎么实现更新用户信息接口去更新个性签名?
eggjs 怎么实现更新用户信息接口去更新个性签名?
107 0
eggjs 怎么实现更新用户信息接口去更新个性签名?
|
前端开发 数据库
eggjs 怎么实现返回 base64 图片的接口给前端回显头像?
eggjs 怎么实现返回 base64 图片的接口给前端回显头像?
300 0
eggjs 怎么实现返回 base64 图片的接口给前端回显头像?