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

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

或者使用

yarn
yarn 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 setup
app.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 handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.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;