资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/node简单实现一个更改头像功能

node简单实现一个更改头像功能

BlackFlagBin / 1249人阅读

摘要：前言一直想写这篇文章，无奈由于要考试的原因，一直在复习，拖延到现在才写，之前用的框架写了个小项目，里面有个上传图片的功能，这里记录一下如何实现我使用的是思路首先，当用户点击上传头像，更新头像的时候，将头像上传到项目的一个文件夹里面我是存放在

前言 
</>复制代码 
  1. 一直想写这篇文章，无奈由于要考试的原因，一直在复习，拖延到现在才写?，之前用 node 的 express 框架写了个小项目，里面有个上传图片的功能，这里记录一下如何实现（我使用的是 ejs）?
思路

首先，当用户点击上传头像，更新头像的时候，将头像上传到项目的一个文件夹里面（我是存放在项目的public/images/img里面），并且将图像名重命名（可以以时间戳来命名）。

2.同时图片在项目的路径插入到用户表的当前用户的 userpicturepath 里面

3.然后更新用户的 session，将图片里面的路径赋值给 session 的里面的picture属性里面

4.

js部分

</>复制代码 
  1. document.querySelector("#modifyPicV").addEventListener("click", function () {
  2.     let formData = new FormData();
  3.     formData.append("file",$("input[name="file"]")[0].files[0]);//把文件对象插到formData对象上
  4.     console.log(formData.get("file"));
  5.     $.ajax({
  6.         url:"/modifyPic",
  7.         type:"post",
  8.         data: formData,
  9.         processData: false,  // 不处理数据
  10.         contentType: false,   // 不设置内容类型
  11.         success:function () {
  12.             alert("success");
  13.             location.reload();
  14.         },
  15.     })
  16. });

路由部分，使用formidable，这是一个Node.js模块，用于解析表单数据，尤其是文件上传

</>复制代码 
  1. let express = require("express");
  2. let router = express.Router();
  3. let fs = require("fs");
  4. let {User} = require("../data/db");
  5. let formidable = require("formidable");
  6. let cacheFolder = "public/images/";//放置路径
  7. router.post("/modifyPic", function (req, res, next) {
  8.     let userDirPath = cacheFolder + "Img";
  9.     if (!fs.existsSync(userDirPath)) {
  10.         fs.mkdirSync(userDirPath);//创建目录
  11.     }
  12.     let form = new formidable.IncomingForm(); //创建上传表单
  13.     form.encoding = "utf-8"; //设置编码
  14.     form.uploadDir = userDirPath; //设置上传目录
  15.     form.keepExtensions = true; //保留后缀
  16.     form.maxFieldsSize = 2 * 1024 * 1024; //文件大小
  17.     form.type = true;
  18.     form.parse(req, function (err, fields, files) {
  19.         if (err) {
  20.             return res.json(err);
  21.         }
  22.         let extName = ""; //后缀名
  23.         switch (files.file.type) {
  24.             case "image/pjpeg":
  25.                 extName = "jpg";
  26.                 break;
  27.             case "image/jpeg":
  28.                 extName = "jpg";
  29.                 break;
  30.             case "image/png":
  31.                 extName = "png";
  32.                 break;
  33.             case "image/x-png":
  34.                 extName = "png";
  35.                 break;
  36.         }
  37.         if (extName.length === 0) {
  38.             return res.json({
  39.                 msg: "只支持png和jpg格式图片"
  40.             });
  41.         } else {
  42.             let avatarName = "/" + Date.now() + "." + extName;
  43.             let newPath = form.uploadDir + avatarName;
  44.             fs.renameSync(files.file.path, newPath); //重命名
  45.             console.log(newPath)
  46.             //更新表
  47.             User.update({
  48.                 picture: newPath
  49.             }, {
  50.                 where: {
  51.                     username: req.session.user.username
  52.                 }
  53.             }).then(function (data) {
  54.                 if (data[0] !== undefined) {
  55.                     User.findAll({
  56.                         where: {
  57.                             username: req.session.user.username
  58.                         }
  59.                     }).then(function (data) {
  60.                         if (data[0] !== undefined) {
  61.                             req.session.user.picture = data[0].dataValues.picture;
  62.                             res.send(true);
  63.                         } else {
  64.                             res.send(false);
  65.                         }
  66.                     })
  67.                 }
  68.             }).catch(function (err) {
  69.                 console.log(err);
  70.             });
  71.         }
  72.     });
  73. });
云服务器 GPU云服务器 python实现简单爬虫功能 更改qq头像 node实现webrtc多人视频聊天 简单编写一个html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90489.html

相关文章

  • node：爬虫爬取网页图片

    摘要：目录安装，并下载依赖搭建服务请求我们要爬取的页面，返回安装我们开始安装，可以去官网下载下载地址，下载完成后运行使用，安装成功后会出现你所安装的版本号。 前言 周末自己在家闲着没事，刷着微信，玩着手机，发现自己的微信头像该换了，就去网上找了一下头像，看着图片，自己就想着作为一个码农，可以把这些图片都爬取下来做成一个微信小程序，说干就干，了解一下基本都知道怎么做了，整理分享一波给大家。 目...

    ygyooo 评论0 收藏0

  • 使用 Vue2.js + Node.js 搭建一个小型的全栈项目

    摘要：大概过来一个多月，我决定两路开工。使用给前端写接口，配备后台管理功能，先把后台搭建好。大概几天过后，后台一些简单的功能实现后，就开始用开始搭建前台，也一直在想做点什么比较好，于是就做了个豆瓣评分类似的项目。 写在前面 由于最近公司业务不是很忙，空闲时间比较多，于是就在纠结Vue.js（之前就学习过）和Node.js先专研哪个比较好，最终选择了先玩玩Node.js。经过一段时间的学习，就...

    freewolf 评论0 收藏0

  • vuejs使用FormData，ajax上传图片文件

    摘要：我相信很多使用的朋友，都有采用上传图片的需求，因为前后端分离后，我们希望都能用来解决数据问题，传统的表单提交会导致提交成功后页面跳转，而使用能够无刷新上传图片等文件。 我相信很多使用vuejs的朋友，都有采用ajax上传图片的需求，因为前后端分离后，我们希望都能用ajax来解决数据问题，传统的表单提交会导致提交成功后页面跳转，而使用ajax能够无刷新上传图片等文件。其实已经有朋友封装了...

    zollero 评论0 收藏0

  • 前端技术日志 | 19年8月21日 | 新的 React DevTools 介绍

    摘要：前端技术日新月异，在你巩固底层技能的同时，别忘了还要跟上前沿技术的发展步伐。你可以从谷歌的博客中了解更多相关信息。令我惊讶的是，谷歌所有地方在非常简单的页面上都没有搜索栏。快速发布预览零配置打包工具。快速启动新的工具。 Web 前端技术日新月异，在你巩固底层技能的同时，别忘了还要跟上前沿技术的发展步伐。 本期刊专注于 Web 前端前沿技术，收集的内容来自国外各大前端技术周刊，这里把值得...

    pepperwang 评论0 收藏0

发表评论

登陆后可评论

0条评论

BlackFlagBin

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<