资讯专栏INFORMATION COLUMN

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

BlackFlagBin / 1158人阅读

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

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

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

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

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

4.

js部分

document.querySelector("#modifyPicV").addEventListener("click", function () {
    let formData = new FormData();
    formData.append("file",$("input[name="file"]")[0].files[0]);//把文件对象插到formData对象上
    console.log(formData.get("file"));
    $.ajax({
        url:"/modifyPic",
        type:"post",
        data: formData,
        processData: false,  // 不处理数据
        contentType: false,   // 不设置内容类型
        success:function () {
            alert("success");
            location.reload();
        },
    })
});

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

let express = require("express");
let router = express.Router();
let fs = require("fs");
let {User} = require("../data/db");
let formidable = require("formidable");
let cacheFolder = "public/images/";//放置路径
router.post("/modifyPic", function (req, res, next) {
    let userDirPath = cacheFolder + "Img";
    if (!fs.existsSync(userDirPath)) {
        fs.mkdirSync(userDirPath);//创建目录
    }
    let form = new formidable.IncomingForm(); //创建上传表单
    form.encoding = "utf-8"; //设置编码
    form.uploadDir = userDirPath; //设置上传目录
    form.keepExtensions = true; //保留后缀
    form.maxFieldsSize = 2 * 1024 * 1024; //文件大小
    form.type = true;
    form.parse(req, function (err, fields, files) {
        if (err) {
            return res.json(err);
        }
        let extName = ""; //后缀名
        switch (files.file.type) {
            case "image/pjpeg":
                extName = "jpg";
                break;
            case "image/jpeg":
                extName = "jpg";
                break;
            case "image/png":
                extName = "png";
                break;
            case "image/x-png":
                extName = "png";
                break;
        }
        if (extName.length === 0) {
            return res.json({
                msg: "只支持png和jpg格式图片"
            });
        } else {
            let avatarName = "/" + Date.now() + "." + extName;
            let newPath = form.uploadDir + avatarName;
            fs.renameSync(files.file.path, newPath); //重命名
            console.log(newPath)
            //更新表
            User.update({
                picture: newPath
            }, {
                where: {
                    username: req.session.user.username
                }
            }).then(function (data) {
                if (data[0] !== undefined) {
                    User.findAll({
                        where: {
                            username: req.session.user.username
                        }
                    }).then(function (data) {
                        if (data[0] !== undefined) {
                            req.session.user.picture = data[0].dataValues.picture;
                            res.send(true);
                        } else {
                            res.send(false);
                        }
                    })
                }
            }).catch(function (err) {
                console.log(err);
            });
        }
    });
});

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

转载请注明本文地址: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条评论

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