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')));
显示结果:
如果不显示,看看你的文件的文件夹名称是啥