国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

node簡單實(shí)現(xiàn)一個(gè)更改頭像功能

BlackFlagBin / 1190人閱讀

摘要:前言一直想寫這篇文章,無奈由于要考試的原因,一直在復(fù)習(xí),拖延到現(xiàn)在才寫,之前用的框架寫了個(gè)小項(xiàng)目,里面有個(gè)上傳圖片的功能,這里記錄一下如何實(shí)現(xiàn)我使用的是思路首先,當(dāng)用戶點(diǎn)擊上傳頭像,更新頭像的時(shí)候,將頭像上傳到項(xiàng)目的一個(gè)文件夾里面我是存放在

前言
一直想寫這篇文章,無奈由于要考試的原因,一直在復(fù)習(xí),拖延到現(xiàn)在才寫?,之前用 node 的 express 框架寫了個(gè)小項(xiàng)目,里面有個(gè)上傳圖片的功能,這里記錄一下如何實(shí)現(xiàn)(我使用的是 ejs)?
思路

首先,當(dāng)用戶點(diǎn)擊上傳頭像,更新頭像的時(shí)候,將頭像上傳到項(xiàng)目的一個(gè)文件夾里面(我是存放在項(xiàng)目的public/images/img里面),并且將圖像名重命名(可以以時(shí)間戳來命名)。

2.同時(shí)圖片在項(xiàng)目的路徑插入到用戶表的當(dāng)前用戶的 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,  // 不處理數(shù)據(jù)
        contentType: false,   // 不設(shè)置內(nèi)容類型
        success:function () {
            alert("success");
            location.reload();
        },
    })
});

路由部分,使用formidable,這是一個(gè)Node.js模塊,用于解析表單數(shù)據(jù),尤其是文件上傳

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);//創(chuàng)建目錄
    }
    let form = new formidable.IncomingForm(); //創(chuàng)建上傳表單
    form.encoding = "utf-8"; //設(shè)置編碼
    form.uploadDir = userDirPath; //設(shè)置上傳目錄
    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);
            });
        }
    });
});

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/90489.html

相關(guān)文章

  • node:爬蟲爬取網(wǎng)頁圖片

    摘要:目錄安裝,并下載依賴搭建服務(wù)請求我們要爬取的頁面,返回安裝我們開始安裝,可以去官網(wǎng)下載下載地址,下載完成后運(yùn)行使用,安裝成功后會(huì)出現(xiàn)你所安裝的版本號(hào)。 前言 周末自己在家閑著沒事,刷著微信,玩著手機(jī),發(fā)現(xiàn)自己的微信頭像該換了,就去網(wǎng)上找了一下頭像,看著圖片,自己就想著作為一個(gè)碼農(nóng),可以把這些圖片都爬取下來做成一個(gè)微信小程序,說干就干,了解一下基本都知道怎么做了,整理分享一波給大家。 目...

    ygyooo 評論0 收藏0
  • 使用 Vue2.js + Node.js 搭建一個(gè)小型的全棧項(xiàng)目

    摘要:大概過來一個(gè)多月,我決定兩路開工。使用給前端寫接口,配備后臺(tái)管理功能,先把后臺(tái)搭建好。大概幾天過后,后臺(tái)一些簡單的功能實(shí)現(xiàn)后,就開始用開始搭建前臺(tái),也一直在想做點(diǎn)什么比較好,于是就做了個(gè)豆瓣評分類似的項(xiàng)目。 寫在前面 由于最近公司業(yè)務(wù)不是很忙,空閑時(shí)間比較多,于是就在糾結(jié)Vue.js(之前就學(xué)習(xí)過)和Node.js先專研哪個(gè)比較好,最終選擇了先玩玩Node.js。經(jīng)過一段時(shí)間的學(xué)習(xí),就...

    freewolf 評論0 收藏0
  • vuejs使用FormData,ajax上傳圖片文件

    摘要:我相信很多使用的朋友,都有采用上傳圖片的需求,因?yàn)榍昂蠖朔蛛x后,我們希望都能用來解決數(shù)據(jù)問題,傳統(tǒng)的表單提交會(huì)導(dǎo)致提交成功后頁面跳轉(zhuǎn),而使用能夠無刷新上傳圖片等文件。 我相信很多使用vuejs的朋友,都有采用ajax上傳圖片的需求,因?yàn)榍昂蠖朔蛛x后,我們希望都能用ajax來解決數(shù)據(jù)問題,傳統(tǒng)的表單提交會(huì)導(dǎo)致提交成功后頁面跳轉(zhuǎn),而使用ajax能夠無刷新上傳圖片等文件。其實(shí)已經(jīng)有朋友封裝了...

    zollero 評論0 收藏0
  • 前端技術(shù)日志 | 19年8月21日 | 新的 React DevTools 介紹

    摘要:前端技術(shù)日新月異,在你鞏固底層技能的同時(shí),別忘了還要跟上前沿技術(shù)的發(fā)展步伐。你可以從谷歌的博客中了解更多相關(guān)信息。令我驚訝的是,谷歌所有地方在非常簡單的頁面上都沒有搜索欄。快速發(fā)布預(yù)覽零配置打包工具。快速啟動(dòng)新的工具。 Web 前端技術(shù)日新月異,在你鞏固底層技能的同時(shí),別忘了還要跟上前沿技術(shù)的發(fā)展步伐。 本期刊專注于 Web 前端前沿技術(shù),收集的內(nèi)容來自國外各大前端技術(shù)周刊,這里把值得...

    pepperwang 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<