Nodejs进阶:基于express+multer的文件上传实例

2020-06-17 07:10:35易采站长站整理

概览

图片上传是web开发中经常用到的功能,node社区在这方面也有了相对完善的支持。

常用的开源组件有multer、formidable等,借助这两个开源组件,可以轻松搞定图片上传。

本文主要讲解以下内容,后续章节会对技术实现细节进行深入挖掘。

基础例子:借助express、multer实现单图、多图上传。
常用API:获取上传的图片的信息。
进阶使用:自定义保存的图片路径、名称。

环境初始化

非常简单,一行命令。


npm install express multer multer --save

每个示例下面,都有下面两个文件


➜ upload-custom-filename git:(master) ✗ tree -L 1
.
├── app.js # 服务端代码,用来处理文件上传请求
├── form.html # 前端页面,用来上传文件

基础例子:单图上传

app.js。


var fs = require('fs');
var express = require('express');
var multer = require('multer')

var app = express();
var upload = multer({ dest: 'upload/' });

// 单图上传
app.post('/upload', upload.single('logo'), function(req, res, next){
res.send({ret_code: '0'});
});

app.get('/form', function(req, res, next){
var form = fs.readFileSync('./form.html', {encoding: 'utf8'});
res.send(form);
});

app.listen(3000);

form.html。


<form action="/upload-single" method="post" enctype="multipart/form-data">
<h2>单图上传</h2>
<input type="file" name="logo">
<input type="submit" value="提交">
</form>

运行服务。

node app.js

访问 http://127.0.0.1:3000/form ,选择图片,点击“提交”,done。然后,你就会看到 upload 目录下多了个图片。

基础例子:多图上传

代码简直不能更简单,将前面的 upload.single(‘logo’) 改成 upload.array(‘logo’, 2) 就行。表示:同时支持2张图片上传,并且 name 属性为 logo。

app.js。


var fs = require('fs');
var express = require('express');
var multer = require('multer')

var app = express();
var upload = multer({ dest: 'upload/' });

// 多图上传
app.post('/upload', upload.array('logo', 2), function(req, res, next){
res.send({ret_code: '0'});
});

app.get('/form', function(req, res, next){
var form = fs.readFileSync('./form.html', {encoding: 'utf8'});
res.send(form);
});

app.listen(3000);

form.html。


<form action="/upload-multi" method="post" enctype="multipart/form-data">