Express利用multer中间件实现文件上传并查看

path系统模块

path介绍

• 编码
  • windows： c:\\user\\admin\\a.jpg
• UI呈现（控制台的打印）
  • windows: c:\user\admin
• API
  • 磁盘路径解析path.parse 得到一个对象
  • 片段合并 path.join 片段先后顺序不能更改
  • 魔术变量 _dirname node.js提供的一个全局变量 获取当前文件路径
  • 片段合并path.resolve 合并磁盘片段,从右到左找根路径，如果没有找到根，以当前文件路径为根路径

代码

//引入path系统mokuai
const path=require('path')

let str='c:\\windows\\images\\a.jpg'
// let str='windows/images/a.jpg'    两种写法都可以

//1. 磁盘路径解析 path.parse   得到一个对象  
console.log(path.parse(str))
/*
{
    root: 'c:\\',   盘符
    dir: 'c:\\windows\\images',  目录   
    base: 'a.jpg',  文件名
    ext: '.jpg',    扩展名
    name: 'a'   文件，不含扩展名
  }
*/
console.log(path.parse(str).ext)//    可以得到对象里任意一个属性  例如扩展名ext    .jpg


//2. 片段合并 path.join   片段先后顺序不能更改
let str1='c:\\windows'
let str2='images'
let str3='a.jpg'

console.log(path.join(str1,str2,str3))  //    c:\windows\images\a.jpg
console.log(path.join(str1,str2))      //       c:\windows\images      拼接完毕后会有盘符


//3. 魔术变量 _dirname   node.js提供的一个全局变量    获取当前文件路径
console.log(__dirname)      //C:\Users\admin\Desktop\file
console.log(path.join(__dirname,str2,str3))     //  C:\Users\admin\Desktop\file\images\a.jpg

//4. 片段合并path.resolve   合并磁盘片段,从右到左找根路径，如果没有找到根，以当前文件路径为根路径

//相当于   console.log(path.join(__dirname,str2,str3)) 
console.log(path.resolve(str2,str3))    //  C:\Users\admin\Desktop\file\images\a.jpg

console.log(path.resolve("c:\\",str2,str3))     // c:\images\a.jpg

//从右到左找到根路径  则根路径左侧的片段不参与合并
console.log(path.resolve("a","b","D:\\abc","c.jpg"))    //  D:\abc\c.jpg   

multer中间件

multer介绍

• 引入 let multer = require('multer')
• 实例化 let objMulter = multer({ dest: './upload' });dest: 指定 保存位置（存到服务器,建立一个文件夹保存)
• app.use(objMulter.any()) 允许上传什么类型文件,any 代表任何类型
• 扩展了 req.files
• multer 接受form-data编码数据,所有要求前端携带时注意一下，
  • 如：<input type=file enctype="multipart/form-data" name="fieldname">

实现代码

• 先利用multer中间件实现上传文件功能
• 再利用fs path模块更改存储在服务器文件的名字，最后返回一个可以查看图片的地址

//1.搭建服务器 引入multer

//引入express
const express=require('express')
//引入multer中间件
const multer=require('multer')
//引入  内置原生模块  fs  path
const fs=require('fs')
const path=require('path')

//搭建一个服务器
server=express()
//监听端口
server.listen(3000)
//静态资源托管
server.use(express.static('./public'))

//2.实例化multer   配置中间件
let objMulter=multer({dest:'./public/upload'})  //dest  指定  保存位置(服务器) 
// server.use(objMulter.image())   仅允许上传图片类型的文件
server.use(objMulter.any())       //允许上传所有类型的文件


//3.设置接口
server.get('/api/file',(req,res)=>{
    // console.log(req.files)
    //req.files  是一个数组里包含一个对象
 /*   [
        {
          fieldname: 'image',      表单name名
          originalname: 'FreshSalt_ZH-CN12818759319_1920x1080.jpg',     上传的文件名
          encoding: '7bit',      编码方式
          mimetype: 'image/jpeg',  文件类型 
          destination: './public/upload',  保存路径
          filename: '3d905ba6571ddd5e9cd5f81e20b7f27d',     保存后的文件名  不含后缀
          path: 'public\\upload\\3d905ba6571ddd5e9cd5f81e20b7f27d',    保存磁盘路径+保存后的文件名 不含后缀
          size: 217843   尺寸
        }
      ]
*/
    //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,
          msg:'上传文件成功',
          url:"http://localhost:3000/upload/"+req.files[0].filename+path.parse(req.files[0].originalname).ext
              //   http://localhost:3000/upload/b2433ad79ee0870f2e0702c5f2874b04.jpg
      })
})

运行

利用postman 接口测试工具

• 选择 form-data
  
  

• 拿到图片地址去查询