nodejs + express 实现文件上传，文件预览，浏览器预览pdf文件，解决跨域

文章目录

• • express 介绍
  • express安装使用
  • 上传文件功能实现
  • 上传文件测试
  • 预览文件
  • nodejs 解决跨域
  • app.js完整代码

express 介绍

基于 Node.js 平台，快速、开放、极简的 Web 开发框架

express安装使用

 npm install -g express

express在4.0后把命令工具单独分了出来，安装完express后，还得安装express-generator

npm install -g express-generator

查看版本号：express --version

创建项目指令

express  项目名称 

创建成功之后 cd 项目名称 进入项目目录

npm install npm start

或者使用

yarnyarn start  

这样就是开启成功了

http://localhost:3000/ //通过浏览器访问就可以看到

这里运行项目推荐使用nodemon，可以及时监听文件修改重新运行项目，不需要自己手动重新启动
使用方法

npm install nodemon -g    //或者   cnpm install nodemon -g

只需要将package.json 中的node 改成 nodemon 就可以了 重新运行一次项目，cnpm/npm start

上传文件功能实现

需要使用到的中间件 multer 和 fs模块，和md5 模块 重新命名文件

npm install  multer  或者   cnpm install  multer

npm install  md5     或者   cnpm install  md5

router/index.js文件

var express = require('express');var router = express.Router();var fs = require('fs'); //文件var multer = require('multer');   //上传文件中间件var md5 = require('md5');// 使用硬盘存储模式设置存放接收到的文件的路径以及文件名var storage = multer.diskStorage({destination: function (req, file, cb) {// 接收到文件后输出的保存路径（若不存在则需要创建）cb(null, 'upload/');},filename: function (req, file, cb) {// 将保存文件名设置为 时间戳 + 文件原始名，比如 151342376785-123.jpg// file.originalname   是文件名+后缀// file.originalname.substring(file.originalname.lastIndexOf("."))  这里是拿到文件的后缀cb(null, md5(Date.now() + file.originalname) + file.originalname.substring(file.originalname.lastIndexOf(".")));  //对当前时间戳 加文件名取MD5 加上后缀名// cb(null, Date.now() + "-" + file.originalname);}});// 创建文件夹  使用此代码就是为了让我们查找磁盘中是否有该文件夹，如果没有，可以自动创建，而不是我们提前手动创建好。如果不使用此代码，则我们再使用该文件夹之前，需要手动创建好当前文件夹var createFolder = function (folder) {try {// 测试 path 指定的文件或目录的用户权限,我们用来检测文件是否存在// 如果文件路径不存在将会抛出错误"no such file or directory"fs.accessSync(folder);} catch (e) {// 文件夹不存在，以同步的方式创建文件目录。fs.mkdirSync(folder);}};var uploadFolder = './upload/';   //文件按照日期分割创建文件夹createFolder(uploadFolder);// 创建 multer 对象var upload = multer({ storage });/* 请求接口 */router.post('/upload/file', upload.single('file'), function (req, res, next) {const file = req.file;console.log('文件类型：%s', file.mimetype);console.log('原文件名：%s', file.originalname);console.log('文件大小：%s', file.size);console.log('保存路径：%s', file.path);// 接收文件成功后返回数据给前端res.send({ ...file })});/* GET home page. */router.get('/', function (req, res, next) {res.render('index', { title: 'Express' });});module.exports = router;

上传文件测试

到这里上传文件就可以了，可以采用请求工具测试
注意下，上传文件文件的参数名是file``就行

响应结果

{"fieldname": "file","originalname": "电子发票.pdf","encoding": "7bit","mimetype": "application/pdf","destination": "upload/","filename": "9225da8b4420447f1645d5a2d4ae9634.pdf","path": "upload\\9225da8b4420447f1645d5a2d4ae9634.pdf","size": 91771}

但是目前还是预览不了文件的，需要给upload 文件夹开放一下静态文件资源

预览文件

在app.js中添加一行代码

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

然后就可以直接预览文件了，访问路径：http://localhost:3000/ + 文件名

nodejs 解决跨域

// 允许跨域访问  使用的是cors解决跨域问题，当我们再本地直接请求该接口的时候，可以直接请求app.all('*', function (req, res, next) {res.header("Access-Control-Allow-Origin", "*");res.header("Access-Control-Allow-Headers", "X-Requested-With");res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");res.header("X-Powered-By", ' 3.2.1')res.header("Content-Type", "application/json;charset=utf-8");next();});

app.js完整代码

var createError = require('http-errors');var express = require('express');var path = require('path');var cookieParser = require('cookie-parser');var logger = require('morgan');var indexRouter = require('./routes/index');var usersRouter = require('./routes/users');var app = express();// view engine setupapp.set('views', path.join(__dirname, 'views'));app.set('view engine', 'jade');app.use(logger('dev'));app.use(express.json());app.use(express.urlencoded({ extended: false }));app.use(cookieParser());app.use(express.static(path.join(__dirname, 'public')));//开放upload静态文件app.use(express.static(path.join(__dirname, 'upload')));app.use('/', indexRouter);app.use('/users', usersRouter);// catch 404 and forward to error handlerapp.use(function(req, res, next) {  next(createError(404));});// error handlerapp.use(function(err, req, res, next) {  // set locals, only providing error in development  res.locals.message = err.message;  res.locals.error = req.app.get('env') === 'development' ? err : {};  // render the error page  res.status(err.status || 500);  res.render('error');});module.exports = app;