express学习笔记8 - 文件上传 下载以及预览

一、上传

1、 安装multer (任意选其中一种)

yarn add multer --S
npm install multer --S

2、新建配置文件(utils/multerConfig)

const multer  = require('multer');
const mkdirp = require('mkdirp');
// const sd = require('silly-datetime');
const path = require('path');

const storage = multer.diskStorage({
  //配置上传的目录
  destination: async (req, file, cb) => {
      // 生成格式化日期
      // let date = sd.format(new Date(), 'YYYYMMDD');
      // let date = '1dfrswdesw'
      let date = String((new Date()).getTime())
      // 获取目录路径
      let dir = path.join('static/uploads', date)
      // 生成目录，异步改同步
      await mkdirp(dir);
      cb(null, dir);
  },
  //修改上传后的文件名
  filename: function (req, file, cb) {
      //1、获取后缀名
      let extname = path.extname(file.originalname);
      //2、根据时间戳生成文件名
      cb(null, Date.now()+extname)
  }
})

// 4. 为 multer 添加配置
const multerConfig = multer({
  storage: storage,
  limits: { fileSize: 2097152 } // 2M
})

module.exports = multerConfig

3、新建文件(router/upload)

const express = require("express");
const router = express.Router();
const multer  = require('multer')
const upload = multer({ dest: 'uploads/' })
const {debug} =require('../utils/constant')
const multerConfig = require('../utils/multerConfig')


// const boom= require('boom')
// const uuid = require('node-uuid');
// const jwt = require('jsonwebtoken') //用来生成token
const Result = require('../models/Result') //封住返回结果类
// express-validator 是一个功能强大的表单验证器，它是 validator.js 的中间件
// const { body, validationResult } = require('express-validator')
// https://blog.51cto.com/coderbin/6085770
router.post('/upload',multerConfig.single('file'),(req,res,next)=>{
    debug && console.log('/file/upload', req.body)
    console.log(req.file);
    new Result(req.file).success(res)
    // listHouseInfo(req.body).then(list=>{
    //     debug && console.log(list)
    //     new Result(list).success(res)
    //   }).catch(err=>{ 
    //     next(boom.badImplementation(err))
    //   })
})
module.exports = router;

4、用postman进行测试 （如果返回下面的内容 说明上传成功）

在目录里面可以看到刚刚上传的那张图片

二、下载

1、在router/upload里面加入下面代码 （我写了一个静态的文件做测试，后期你可以通过传参数把它变成动态的）

// 下载
router.get('/download',(req,res,next)=>{
    
    debug && console.log('/file/download', req.body)
    console.log(req.file);
    let filePath = path.join(__dirname,'../static/uploads/1692155801705/1692155801706.png' )
    console.log(__dirname)
    res.download(filePath)
    // new Result(req.file).success(res)
    // listHouseInfo(req.body).then(list=>{
    //     debug && console.log(list)
    //     new Result(list).success(res)
    //   }).catch(err=>{ 
    //     next(boom.badImplementation(err))
    //   })
})

然后在postman做测试（返回出现图片说明成功了），你也可以直接在浏览器做测试

三、文件预览

在app.js加入下面代码

const path = require('path');
//开放upload静态文件
app.use(express.static(path.join(__dirname, 'static')));

显示结果：

如果不显示，看看你的文件的文件夹名称是啥