1. 搭建Express项目

安装express

npm install express

创建express项目，以下app-server为项目名

express app-server

cd 进入app-server目录，并运行 npm install 安装相关依赖库

注意在app-server/bin目录的www文件里指定了端口，默认为3000，我这里改为3002，避免与其他服务冲突

再输入npm start命令即运行express服务

浏览器显示如下：

2. 搭建multer文件上传服务

express默认支持jade文件，如下图app-server/views 目录所示

需要改为支持html, 安装ejs

npm install ejs --save

并修改app-server目录下的app.js文件

并增加如下语句：

//引入路由
const multerUpload = require('./routes/upload');//使用路由
app.use('/upload', multerUpload);

完整代码如下：

//引入路由
const multerUpload = require('./routes/upload');var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var ejs = require('ejs');// 使express支持html模板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.engine('html', ejs.__express);
app.set('view engine', 'html');//使用路由
app.use('/upload', multerUpload);//使用路由
app.use('/upload', multerUpload);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')));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 developmentres.locals.message = err.message;res.locals.error = req.app.get('env') === 'development' ? err : {};// render the error pageres.status(err.status || 500);res.render('error');
});module.exports = app;

在routes目录下创建uploads.js文件，如下：

const express = require('express');
const router = express.Router();
const multer = require('multer');let upload = multer({storage: multer.diskStorage({destination: function (req, file, cb) {cb(null, './uploads/');},filename: function (req, file, cb) {var changedName = (new Date().getTime())+'-'+file.originalname;cb(null, changedName);}})
});//单个文件上传
router.post('/single', upload.single('singleFile'), (req, res) => {console.log(req.file);res.json({code: '0000',type: 'single',originalname: req.file.originalname,path: req.file.path})
});//多个文件上传
router.post('/multer', upload.array('multerFile'), (req, res) => {console.log(req.files);let fileList = [];req.files.map((elem) => {fileList.push({originalname: elem.originalname})});res.json({code: '0000',type: 'multer',fileList: fileList});
});module.exports = router;

设置完成后，删除app-server/views目录下的jada文件，并在该目录下创建html文件，如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><!-- 单文件上传 --><div class="single"><div class="title">单个文件上传</div><input type="file" name="singleFile" id="singleFile"><button class="submit">上传</button><img src="" alt="" id="img"></div><div class="multer"><div class="title">多个文件上传</div><input type="file" name="multerFile" id="multerFile" multiple><button class="submit">上传</button></div><div class="upbefore"><div class="title">可多次点击添加按钮，并预览</div><div id="imgs"></div><input type="file" id="upgteimg" value=""/><button class="submit">上传</button></div><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><script>// 单文件上传$('.single .submit').on('click', function () {var fileList = $('#singleFile')[0].files;console.log(fileList);var formData = new FormData();//此处文件名必须为 singleFile ，因为后台设置仅接口此文件名formData.append('singleFile', fileList[0]);$.ajax({url: '/upload/single',type: 'post',processData: false,contentType: false,//使用multer配合ajax时无需配置multipart/form-data，multer将自动配置，手动配置将报错，boundary not founddata: formData,success: function (data) {console.log(data)$('#img').attr('src', data.path)}})});// 多文件上传$('.multer .submit').on('click', function () {var fileList = $('#multerFile')[0].files;console.log(fileList);var formData = new FormData();for (let i = 0; i < fileList.length; i++) {//此处文件名必须为 multerFile ，因为后台设置仅接口此文件名formData.append('multerFile', fileList[i]);}$.ajax({url: '/upload/multer',type: 'post',processData: false,contentType: false,data: formData,success: function (data) {console.log(data)}})});// 可多次点击添加按钮，并预览let arr = [];let src = [];$('#upgteimg').on('change', function () {let $this = $(this)let url = URL.createObjectURL($this[0].files[0]);src.push(url);arr.push($this[0].files[0]);console.log(arr);console.log(src);showImg()})function showImg() {let html = ''for (let i = 0; i < src.length; i++) {const element = src[i];html += `<img src="${element}" alt="">`}$('#imgs').html(html);}$('.upbefore .submit').on('click', function () {var formData = new FormData();for (let i = 0; i < arr.length; i++) {//此处文件名必须为 multerFile ，因为后台设置仅接口此文件名formData.append('multerFile', arr[i]);}$.ajax({url: '/upload/multer',type: 'post',processData: false,contentType: false,data: formData,success: function (data) {console.log(data)}})})</script>
</body></html>

3. 运行测试

然后npm start运行，浏览器可以看到如下：

选择文件，并上传，文件将上传到app-server/uploads目录下，如下图所示：

[NodeJS] 使用Express multer搭建文件上传服务相关推荐

Nodejs基于express+multer的文件上传
概览图片上传是web开发中经常用到的功能,node社区在这方面也有了相对完善的支持. 常用的开源组件有multer.formidable等,借助这两个开源组件,可以轻松搞定图片上传. 本文主要讲解以 ...
关于NodeJs使用multer实现文件上传以及实现下载
关于NodeJs使用express+multer实现文件上传以及实现下载对于multer的了解可以在 https://www.npmjs.com/ 搜索 multer 了解具体用法. Multer ...
使用Multer进行文件上传
File upload is a common feature that almost every website needs. We will go through step by step on ...
node + multer 实现文件上传
node + multer 实现文件上传介绍使用Node.js中的express框架和multer,实现文件的上传实现 1. 前端 <el-uploadclass="upload ...
如何基于OSS和MPS，快速搭建音视频文件上传服务？
背景本文主要介绍如何基于OSS服务和MPS的上传SDK,快速搭建一个音视频文件上传服务. 优势使用MPS的上传SDK上传音视频文件,具有以下优势: 增加文件列表管理功能. 增加STS Token ...
如何基于OSS和MTS，快速搭建音视频文件上传服务？
摘要: 背景本文主要介绍如何基于OSS服务和MTS的上传SDK,快速搭建一个音视频文件上传服务. 优势使用MTS的上传SDK上传音视频文件,具有以下优势: 增加文件列表管理功能. 增加STS To ...
[golang]简单文件上传服务
利用net/http库及gorilla/mux库实现了一个简单的文件上传服务, 示例如下: package mainimport ("fmt""github.com/go ...
Html5+NodeJS——拖拽多个文件上传到服务器
实现多文件拖拽上传的简易Node项目,可以在github上下载,你可以先下载下来:https://github.com/Johnharvy/upLoadFiles/. 解开下载下的zip格式包,建议用 ...
Node.js 高级篇（六）：手把手教你使用和理解 Multer 实现文件上传，包懂 O(∩_∩)O~
文章目录前端界面代码服务端启动服务文件信息 Multer 中间件 Multer(options) .single(fieldname) .array(fieldname[, maxCoun ...

[NodeJS] 使用Express multer搭建文件上传服务

1. 搭建Express项目

2. 搭建multer文件上传服务

3. 运行测试

[NodeJS] 使用Express multer搭建文件上传服务相关推荐

最新文章

热门文章