Nodejs的multer模块实现文件上传

服务端需要进行如下操作

1.下载multer模块

npm install multer

2. 引入multer模块; 配置上传地址,文件名称

// 引入需要的模块
let express = require("express");
let path = require("path");
let fs = require("fs");
// 引入multer模块
let multer = require('multer');
let app=express();
app.listen(3000,()=>{
  console.log("running at http://localhost:3000");
})
app.use('/upload',express.static("./upload")); // 托管静态资源
// 1. 设置文件存放位置
let upload = multer({dest:'upload'})
app.post('/file',upload.single('file'),(req,res)=>{   // file 与前端input 的name属性一致
  // 2. 上传的文件信息保存在req.file属性中
  console.log(req.file)  
    let oldName = req.file.path; // 上传后默认的文件名 : 15daede910f2695c1352dccbb5c3e897
    let newName = 'upload/'+req.file.originalname  // 指定文件路径和文件名
    // 3. 将上传后的文件重命名
    fs.renameSync(oldName, newName);
    // 4. 文件上传成功,返回上传成功后的文件路径
    res.send({
        err: null,   
        url: "http://localhost:3000/" +newName // 复制URL链接直接浏览器可以访问
    });
})

前端页面上传文件代码

1. action的属性值为上传文件接口

2.上传方式method指定为post

3. 设置上传文件类型 enctype="multipart/form-data"

想要了解更多关于multer模块,可以参考

multer/README-zh-cn.md at master · expressjs/multer · GitHub

你可能感兴趣的:(vue.js,npm,前端)