✨文章有误请指正，如果觉得对你有用，请点三连一波，蟹蟹支持😘

                    ⡖⠒⠒⠒⠤⢄⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸   ⠀⠀⠀⡼⠀⠀⠀⠀ ⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢶⣲⡴⣗⣲⡦⢤⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠋⠉⠉⠓⠛⠿⢷⣶⣦⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠇⠀⠀⠀⠀⠀⠀⠘⡇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡞⠀⠀⠀⠀⠀⠀⠀⢰⠇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡴⠊⠉⠳⡄⠀⢀⣀⣀⡀⠀⣸⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠰⠆⣿⡞⠉⠀⠀⠉⠲⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠈⢧⡀⣀⡴⠛⡇⠀⠈⠃⠀⠀⡗⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣱⠃⡴⠙⠢⠤⣀⠤⡾⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⣇⡼⠁⠀⠀⠀⠀⢰⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣸⢠⣉⣀⡴⠙⠀⠀⠀⣼⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡏⠀⠈⠁⠀⠀⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠀⠀⠀⠀⠀⠀⡼⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⣰⠃⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣀⠤⠚⣶⡀⢠⠄⡰⠃⣠⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢀⣠⠔⣋⣷⣠⡞⠀⠉⠙⠛⠋⢩⡀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀
⠀⡏⢴⠋⠁⠀⣸⠁⠀⠀⠀⠀⠀ ⠀⣹⢦⣶⡛⠳⣄⠀⠀⠀⠀⠀
⠀⠙⣌⠳⣄⠀⡇   不能   ⡏⠀⠀  ⠈⠳⡌⣦⠀⠀⠀⠀
⠀⠀⠈⢳⣈⣻⡇   白嫖 ⢰⣇⣀⡠⠴⢊⡡⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠳⢿⡇⠀⠀⠀⠀⠀⠀⢸⣻⣶⡶⠊⠁⠀⠀
⠀⠀⠀⠀⠀⢠⠟⠙⠓⠒⠒⠒⠒⢾⡛⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣠⠏⠀⣸⠏⠉⠉⠳⣄⠀⠙⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⡰⠃⠀⡴⠃⠀⠀⠀⠀⠈⢦⡀⠈⠳⡄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣸⠳⣤⠎⠀⠀⠀⠀⠀⠀⠀⠀⠙⢄⡤⢯⡀⠀⠀⠀⠀⠀⠀
⠀⠐⡇⠸⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡆⢳⠀⠀⠀⠀⠀⠀
⠀⠀⠹⡄⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠸⡆⠀⠀⠀⠀⠀
⠀⠀⠀⠹⡄⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⡀⣧⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢹⡤⠳⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣷⠚⣆⠀⠀⠀⠀
⠀⠀⠀⡠⠊⠉⠉⢹⡀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡎⠉⠀⠙⢦⡀⠀
⠀⠀⠾⠤⠤⠶⠒⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠒⠲⠤⠽

前言

Node.js是一个javascript运行环境。它让javascript可以开发后端程序，实现几乎其他后端语言实现的所有功能，可以与```PHP、Java、Python、.NET、Ruby等后端语言平起平坐。
Nodejs是基于V8引擎，V8是Google发布的开源JavaScript引擎，本身就是用于Chrome浏览器的JS解释，但是Node之父 Ryan Dahl把这V8搬到了服务器上，用于做服务器的软件。

文件上传

Npm ： https://www.npmjs.com/package/multer

multer 模块：Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它主要用于上传文件。

Multer ：Multer 会添加一个 body 对象以及 file 或 files 对象到 express 的 request 对象中。 body 对象包含表单的文本域信息， file 或 files 对象包含对象表单上传的文件信息。

使用包： npm install --save multer

注意: Multer模块不会处理任何非 multipart/form-data 类型的表单数据。

使用步骤

1、const multer  = require('multer') //导入模块
2、const upload = multer({ dest: 'uploads/' }) //配置储存资源的文件夹
3、const app = express() //创建接收

//单个文件上传
app.post('/profile', upload.single('这里要和提交的表单名称一模一样'), function (req, res, next) {

})
//多个文件上传 保存为数组
app.post('/photos/upload', upload.array('photos', 12), function (req, res, next) {

})

//注意:接口只有做了Single这一步后端才能接收到数据

后端接口

文件图示

在这里插入图片描述

路由

home
const express = require('express')
const router = express.Router()

router.get('/', (req, res) => {
    res.render('home', { title: '蔡先生' })
})

module.exports = router

upload
const express = require('express')
const router = express.Router()

router.get('/', (req, res) => {
    res.render('upload', { title: '蔡先生' })
})

module.exports = router

const express = require('express')
const app = express()
const path = require('path')

require('./config/db.config')

const homeRouter = require('./routers/home')

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'ejs')

app.use('/home', homeRouter)
app.use('/upload', uploadRouter)
app.use('/api', uploadDataApiRouter)
app.use(express.static(path.join(__dirname, 'public')))


app.listen(3000, () => {
    console.log("http://127.0.0.1:3000");
})

数据库

连接 文件夹规范 config → db.config
const mongoose = require('mongoose')

mongoose.connect('mongodb://127.0.0.1:27017/DataDatabase').then(() => {
    console.log("连接数据库成功！");
})

创建集合 文件夹规范 model → UnloadMongodb
const mongoose = require('mongoose')

const schema = mongoose.Schema

const dataModulType = {
    avatar: String
}

const Upload = mongoose.model('Upload', new schema(dataModulType ))

module.exports = Upload

上传文件接口

const express = require('express')
const router = express.Router()
const multer = require('multer')
const upload = multer({ dest: 'public/uploads' })

const UnloadModul = require('../model/UnloadMongodb')

router.post('/uploaddata', upload.single("avatar"), async (req, res) => {

    //这里操作数据库
    await UnloadModul.create({
        avatar: req.file?.filename ? `/uploads/${req.file.filename}` : "/images/default.png"
    })

    res.redirect('/home')
})

router.get('/uploaddata', async (req, res) => {
    //这里操作数据库
    res.send(await UnloadModul.find({}, ["avatar"]))
})

module.exports = router

Form表单上传

代码演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>

<body>
    <h1>
        欢迎您 <%= title%> !
    </h1>
    <h1>
        表单上传
    </h1>
    <form action="/api/uploaddata" method="POST" enctype="multipart/form-data">
        <div>
            头像：<input type="file" name="avatar" value="选择文件" multiple>
        </div>

        <div>
            <input type="submit" value="添加用户" id="subBut">
        </div>
    </form>
</body>

</html>

Axios前后端分离上传

代码演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<style>
    #imgBox {
        border: 1px red solid;
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
        justify-content: center;
    }

    #imgDiv {
        position: relative;
        border: 1px solid red;
        margin: 15px;
        width: 100px;
    }

    img {
        display: inline-block;
        vertical-align: middle;
        margin: auto;
        width: 100%;
    }
</style>

<body>
    <h1>
        欢迎您 <%= title%> !
    </h1>
    <h1>
        Axios 上传
    </h1>
    <div>
        <div>头像:<input type="file" id="avatar" multiple /></div>
        <div><button id="addBut">添加</button></div>
    </div>

    <div id="imgBox">

    </div>
</body>
<script>
    const imgBox = document.querySelector("#imgBox")
    const addBut = document.querySelector("#addBut")
    const avatar = document.querySelector("#avatar")

    getData()

    addBut.addEventListener('click', () => {
        // console.log(avatar.value);
        // console.log(avatar.files);

        const formsdata = new FormData()
        formsdata.append("avatar", avatar.files[0])

        axios.post('/api/uploaddata', formsdata, {
            Headers: {
                "Content-Type": 'multipart/form-data'
            }
        }).then(reason => {
            getData()
        })
    })

    function getData() {
        axios.get('/api/uploaddata').then(reason => {
            imgBox.innerHTML = reason.data.map((item) => {
                return `<div id="imgDiv"><img src="${item.avatar}"/></div>`
            }).join("")
        })
    }

</script>

</html>

实现效果演示

请添加图片描述

记录读取图片文件

const FileDispose = {
    ImgFile: (selfObj, ToObj) => {
        if (selfObj.files.length) {
            let file = selfObj.files[0];
            let reader = new FileReader();
            //新建 FileReader 对象
            reader.onload = function () {
                // 当 FileReader 读取文件时候，读取的结果会放在 FileReader.result 属性中
                ToObj.src = this.result
                // document.querySelector('#text').innerHTML = this.result;
            };
            // 设置以什么方式读取文件，这里以base64方式
            console.log(file);
            reader.readAsDataURL(file);
        }
    }
}