Carga de archivos Nodejs y renderizado de backend

Carga de archivos

Pensamiento

El formulario front-end-> el back-end recibió el archivo en sí-> guardado en el servidor-> registra cierta información en la base de datos-> la biblioteca vuelve a la información relacionada con nodejs-> nodejs vuelve al frente

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

Método de carga

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

Implementación

Combinada con la interfaz de envío del software Postman, la imagen se carga con éxito y,

finalmente, la dirección puede devolverse al cliente

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

El código general es el siguiente:

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

nombre del campo: nombre del nombre del formulario nombre
original:
codificación del nombre del archivo cargado : método de codificación
tipo mime:
búfer del tipo de archivo
: tamaño del archivo en sí mismo : tamaño
destino: guardar la ruta
nombre del archivo: nombre del archivo guardado sin
ruta del sufijo : ruta del disco guardada + archivo guardado El nombre no incluye el sufijo
multer-> El nombre del archivo será aleatorio-> El módulo fs cambia de nombre-> ruta El módulo del sistema resuelve la ruta del disco

Backend: multer acepta datos codificados de datos de formulario

módulo de sistema de ruta

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

Cambiar el nombre del archivo cargado

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

Efecto:
Antes del

cambio: Después del cambio:

Ruta del disco del sistema operativo

Código

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

Mac: ~/desktop/1901

Representación de la interfaz de usuario

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

API

Análisis de ruta de disco analizar

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

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

Unir fusión de fragmentos

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

La variable mágica __dirname devuelve la ruta del disco donde se encuentra el archivo actual

Fragmento fusión resolver

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

Combina fragmentos de disco, encuentra la raíz de derecha a izquierda, empalma de izquierda a derecha, no se encuentra la raíz, toma la ruta actual del archivo como raíz

middleware multer

Instalación
enchufable npm i express multer -S

form-data Multer recibir datos codificados, nota que cuando se lleva a todos los requisitos en el extremo delantero, tales como: <input type=file enctype="multipart/form-data" name="fieldname",

Para utilizar

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

El middleware extiende el cuerpo de solicitud de solicitud req.files

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

Representación de fondo

Por lo general, según los datos json devueltos por el back-end, la generación de html se denomina renderización front-end y la representación back-end es la representación back-end de json y html combinados y devueltos al navegador.

Ideas

• Usuario-> barra de direcciones (solicitud http [s]) -> servidor web (recibido) -> solicitud de proceso nodejs (devolución estática y dinámica) -> servicio de base de datos de solicitud (resultado de devolución) -> nodejs (recepción) -> representación de nodo Página-> Navegador (reciba la página, complete la representación final)

Motor de plantillas

No importa quién renderizará la página antes o después, se utilizará el motor de plantillas. La página de renderización front-end en realidad está operando dom , y la página de renderización de back-end es unir los datos y caracteres HTML y lanzarlos al navegador

Motor	Frente	Backend
angularJs	√	×
vue / bigote	√	√
reaccionar	√	√
angularTs / bigote	√	√
jade / pug	×	√
ejs	×	√
jquery + plantilla de arte	√	×
handlerbars	√	×

jade

Principio : fs toma la página estática front-end + jade + datos-> devuelve enviar (datos) -> navegador

Características : intrusiva, fuerte dependencia

Para utilizar

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

sintaxis de archivo de plantilla de jade

Padre e hijo deben estar sangrados.
Atributos:
Contenido de la etiqueta (clave = valor, clave2 = valor) : el
uso del contenido de la etiqueta se demuestra de la siguiente manera :

otras extensiones

ejs

Principio : fs toma la página estática front-end + ejs + data-> devuelve send (data) -> browser

Características : no invasivo, suave, débilmente dependiente

Para utilizar

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

err: error, nulo significa que no hay error

datos: caracteres representados | flujo

plantilla ejs: archivo html con sufijo llamado ejs

sintaxis de archivo de plantilla ejs

• estructura ejs es html
• Salida: <% = nombre de datos | nombre de atributo | nombre de variable + expresión%>
  
• Declaración: <% instrucción%> debe estar envuelto por <%%>
  
• Salida sin escapes: <% - nombre de datos | nombre de variable + expresión%>
  
  
• Cargar public: <% - include ('./ hd.ejs', {data})%>
  
  

El código de demostración ejq es el siguiente:

otras extensiones