概览
图片上传是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">









