案例使用node.js的第三方模块(express和multer)实现文件上传

首先,先按照这两个第三方模块,按照命令:cnpm i express multer --save

第一步:把express服务器思路先写好:

1.导入模块;
2.实例化对象;
3.写路由;
4.开启监听;

代码如下:

//上传文件的使用(express结合multer的使用)

//1.导入模块
const express=require("express");
//2.实例化服务器对象
let app=express();

//3.写路由
app.post('/upload',(req,res)=>{
    res.send('success');
    
})
//4.开启监听
app.listen(3000,()=>{
    console.log("服务器开启了");
    
})

第二步,multer文件上传:

操作思路:
1.导入模块

let multer  = require('multer')

2.实例化

let upload = multer({ dest: 'uploads/' })//uploads是创建的文件夹,没有会主动创建,可改

3.写路由

app.post('/upload',upload.single('avater'),(req,res,next)=>{
    // req.file 是 `avatar` 文件的信息
  // req.body 将具有文本域数据，如果存在的话
    res.send('success');
    
})

说明:avater,是post里form-data里上传的键

第三步:

上面两步操作完后,会直接多了一个文件,但 发现直接上传的是乱码的文件名

解决方法:重新修改文件名,格式:fs.renameSync(旧路径,新路径)
解决步骤:
先导入内置的fs和path模块,因为下面要操纵文件和路径
3.1旧路径直接req.file.path,

   let oldPath=req.file.path;

选择req.file.path的原因,因为对象里就有path属性

3.2新路径要先拼接:

    let newPath=path.join(__dirname,'uploads',req.file.originalname)

path.join官方文档解释

__dirname官方解释:它会返回当前完整的根目录.png

3.3修改文件名:

   fs.renameSync(oldPath,newPath);

fs.renameSync官方文档解释

这样就完美上传到uploads文件夹了.

最后附上完整的代码:

//上传文件的使用(express结合multer的使用)

//1.导入模块
const express=require("express");
//2.实例化服务器对象
let app=express();

//导入multer文件上传对象和实例化
let multer  = require('multer')
let upload = multer({ dest: 'uploads/' })//uploads是创建的文件夹,没有会主动创建

//导入连个内置模块
const path= require('path')
const fs=require('fs')


//3.写路由
app.post('/upload',upload.single('avater'),(req,res,next)=>{//avater是上传文件的key
    // req.file 是 `avatar` 文件的信息
    res.send('success');
    
    //直接上传的是乱码的文件名
    // 解决方法:重新修改文件名,格式:fs.renameSync(旧路径,新路径)

    // 3.1旧路径直接req.file.path,
    let oldPath=req.file.path;
    // 3.2新路径要先拼接:
    let newPath=path.join(__dirname,'uploads',req.file.originalname)
    // 3.3修改文件名:
    fs.renameSync(oldPath,newPath);
    
    

    
})
//4.开启监听
app.listen(3000,()=>{
    console.log("服务器开启了");
    
})