NodeJS File Upload⑩

---

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

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

前言

1. Node.js是一个javascript运行环境。它让javascript可以开发后端程序，实现几乎其他后端语言实现的所有功能，可以与```PHP、Java、Python、.NET、Ruby等后端语言平起平坐。
2. 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

• app

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表单上传

代码演示

"en">


    "UTF-8">
    "X-UA-Compatible" content="IE=edge">
    "viewport" content="width=device-width, initial-scale=1.0">
    



    

        欢迎您 <%= title%> !
    
    

        表单上传
    
    
"/api/uploaddata" method="POST" enctype="multipart/form-data">
        

            头像："file" name="avatar" value="选择文件" multiple>
        

        

            "submit" value="添加用户" id="subBut">
        
    

   Axios前后端分离上传

代码演示

"en">


    "UTF-8">
    "X-UA-Compatible" content="IE=edge">
    "viewport" content="width=device-width, initial-scale=1.0">
    





    

        欢迎您 <%= title%> !
    
    

        Axios 上传
    
    

        
头像:
        
添加
    

    


    

   实现效果演示

---

   记录 读取图片文件

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);
        }
    }
}

总结

以上是个人学习Node的相关知识点，一点一滴的记录了下来，有问题请评论区指正，共同进步，这才是我写文章的原因之，如果这篇文章对您有帮助请三连支持一波