Nodejs——文件上传和后端渲染

文件上传

思想

前端表单->后端接收到文件本身->保存到服务器上->给数据库记录文件一些信息->库返回给nodejs相关信息->nodejs返回给前端

前端: <input type=file enctype=“multipart/form-data” name=“fieldname”

上传方法

 app.use(objMulter.image())  //允许上传图片类型
 app.use(objMulter.any())    //允许上传什么类型的文件，any代表允许任何类型

实现

结合Postman软件发送接口，就成功把图片上传

最后就可以把地址返回给客户端

res.send({
        err:0,
        url:"http://localhost:3000/upload/" + req.files[0].filename +path.parse(req.files[0].originalname).ext 
    }) 

整体代码如下：

const express = require("express")
const app = express()
const path = require("path") //引入path模块
const fs =require("fs")
app.listen(3000,()=>console.log("正在监听。。。"))

// 静态资源托管
// 如果用户想在浏览器上直接访问图片或者html页面，需要做一个静态服务器
app.use(express.static("./public"))

// 文件上传 前端上传一张图片，后端需要把图片存入upload文件夹里面
// 1.引入multer中间件
const multer = require("multer")

// 2.实例化multer
let objMulter = multer({dest:'./public/upload'});//data：指定保存位置

// 3.安装中间件
// app.use(objMulter.image())  允许上传图片类型
app.use(objMulter.any())    //允许上传什么类型的文件，any代表允许任何类型

app.post("/api/reg",(req,res)=>{
    // console.log(req.files);

    // 4.fs.renameSync("改前"，"改后")
    let oldFile = req.files[0].path     //更改前的名字
    let newFile = req.files[0].path+path.parse(req.files[0].originalname).ext   //更改后的名字
    fs.renameSync(oldFile,newFile)

    //5.把磁盘路径转为网络路径入库操作

    // 6.可以把地址返回给客户端
    res.send({
        err:0,
        url:"http://localhost:3000/upload/" + req.files[0].filename +path.parse(req.files[0].originalname).ext 
    }) 
}) 

fieldname: 表单name名
originalname: 上传的文件名
encoding： 编码方式
mimetype: 文件类型
buffer: 文件本身
size：尺寸
destination: 保存路径
filename： 保存后的文件名 不含后缀
path： 保存磁盘路径+保存后的文件名 不含后缀
multer->文件名会随机->fs模块改名->path系统模块解析磁盘路径

后端：multer 接受 form-data编码数据

path系统模块

const path = require("path") //引入path模块

更改上传文件名字

app.post("/api/reg",(req,res)=>{
    // console.log(req.files);

    // 4.fs.renameSync("改前"，"改后")
    let oldFile = req.files[0].path     //更改前的名字
    let newFile = req.files[0].path+path.parse(req.files[0].originalname).ext   //更改后的名字
    fs.renameSync(oldFile,newFile)

    res.end() 
}) 

效果：
改前：

改后：

操作系统磁盘路径

编码

windows： c:\\user\\admin\\a.jpg

mac: ~/desktop/1901

UI呈现

windows: c:\user\admin
mac: ~/desktop/1901

API

磁盘路径解析 parse

path.parse('c:\\wamp\\xx.png') // string -> object

//返回
{
   root: 'c:\\', 盘符
   dir: 'c:\\wamp', 目录
   base: 'xx.png',  文件名
   ext: '.png', 扩展名
   name: 'xx' 	文件，不含扩展名
}

片段合并join

path.join('磁盘路径1','磁盘路径2'，'磁盘路径n')

__dirname 魔术变量 返回当前文件所在的磁盘路径

片段合并 resolve

path.resolve('磁盘路径1','磁盘路径n')

合并磁盘片段,右到左找根，左到右拼接，没有找到根，以当前文件路径为根

multer中间件

插件安装
npm i express multer -S

multer 接受 form-data编码数据,所有要求前端携带时注意一下，如：<input type=file enctype="multipart/form-data" name="fieldname",

使用

//1 引入
let multer  = require('multer');
//2 实例化  
let objMulter = multer({ dest: './upload' }); //dest: 指定 保存位置（存到服务器)
//安装中间件， 
app.use(objMulter.any());  //允许上传什么类型文件,any 代表任何类型 

中间件扩展了req请求体 req.files

app.get('/reg',(req,res)=>{
  req.files
})

后端渲染

通常根据后端返回的json数据，然后来生成html被称为前端渲染，而后端渲染是后端把json与html结合渲染好后返回到浏览器，没前端什么事了

思路

• 用户 - > 地址栏(http[s]请求) -> web服务器（收到) - > nodejs处理请求(返回静态、动态)->请求数据库服务(返回结果)->nodejs(接收)->node渲染页面->浏览器（接收页面，完成最终渲染)

模板引擎

无论前后谁来渲染页面，都会用到模板引擎，前端渲染页面实际上是操作dom，后端渲染页面是把数据和html字符拼接后丢给浏览器

引擎	前端	后端
angularJs	√	×
vue/mustach	√	√
react	√	√
angularTs/mustach	√	√
jade/pug	×	√
ejs	×	√
jquery + art-template	√	×
handlerbars	√	×

jade

原理：fs抓取前端静态页面 + jade + 数据 -> 返回send(data) -> 浏览器

特点：侵入式，强依赖

使用

let jade = require('jade')
let html = jade.renderFile('jade模板文件'，{数据}，{pretty:true});	//返回字符

jade模板文件语法

父子要缩进
属性： 标签(key=value,key2=value)
内容: 标签 内容
使用方法演示如下：

其他扩展

ejs

原理：fs抓取前端静态页面 + ejs + 数据 -> 返回send(data) -> 浏览器

特点：非侵入式，温和，弱依赖

使用

let ejs = require('ejs')
ejs.renderFile('ejs模板文件',{要合并到html数据},回调(err,data))

err：错误，null代表没有错误

data: 渲染后的字符|流

ejs模板 ： 后缀名为ejs的html文件

ejs模板文件语法

• ejs 结构就是html
• 输出: <%= 数据名|属性名|变量名 + 表达式 %>
  
• 语句： <% 语句 %> 需要被<% %> 包裹
  
• 非转义输出: <%- 数据名|变量名 + 表达式 %>
  
  
• 载入公共：<%- include(’./hd.ejs’,{数据}) %>
  
  

ejq演示代码如下：

其他扩展