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')));

显示结果：

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