- 内容简介
- 译者序
- 前言
- 第 1 章 安装配置新项目
- 第 2 章 Flexbox 布局介绍
- 第 3 章 用 React Native 开发一个应用
- 第 4 章 在 React Native 中使用导航
- 第 5 章 动画和滑动菜单
- 第 6 章 用 React Native 绘制 Canvas
- 第 7 章 使用 React Native 播放音频
- 第 8 章 你的第一个自定义视图
- 第 9 章 Flux 介绍
- 第 10 章 处理复杂的应用程序状态
- 第 11 章 使用 Node 来实现服务端 API
- 第 12 章 在 React Native 中使用文件上传
- 第 13 章 理解 JavaScript Promise
- 第 14 章 fetch 简介
- 第 15 章 在 iOS 中使用 SQLite
- 第 16 章 集成 Google Admob
- 第 17 章 React Native 组件国际化
- 附录 A React.js 快速介绍
- 附录 B Objective-C Primer
- 附录 C webpack 入门
创建服务器
由于 Node.js 的异步特性和网络编程方式,使它的文件上传看起来单调乏味。然而这却是我所见过的最简单的文件上传机制之一。
如何去做一个文件上传?
使用 express 和 multer 中间件可以处理上传。这个中间件适用于处理 multipart/form-data 格式的数据。
我们的项目:
这个项目很简单。我们会简单描述 Web 服务器的路由和其他功能。multer 会处理上传的文件和 HTML 表单输入。
mkdir fileupload
npm init
npm install --save express multer
server.js
/* 加载依赖
*/
var express=require("express");
var multer = require('multer');
var app=express();
var done=false;
/* 配置
multer */
app.use(multer({ dest: './uploads/',
rename: function (fieldname, filename) {
return filename+Date.now();
},
onFileUploadStart: function (file) {
console.log(file.originalname + ' is starting ...')
},
onFileUploadComplete: function (file) {
console.log(file.fieldname + ' uploaded to ' + file.path)
done=true;
}
}));
/* 路由处理
*/
app.get('/', function(req, res){
res.sendfile("index.html");
});
app.post('/api/photo', function(req, res){
if(done==true){
console.log(req.files);
res.end("File uploaded.");
}
});
/* 启动服务
*/
app.listen(3000, function(){
console.log("Working on port 3000");
});
执行
node server.js
运行项目,选择文件上传,然后去查看服务器,上传的文件就在指定的上传文件夹里面。
注解
在 server.js 文件中,已经配置了 multer。multer 的事件会在合适的情况下被触发,例如使用 onFileUploadStart。这表示文件已经开始上传,上传的事件就会被触发。
完成上传后,变量 file 是一个包含以下信息的对象。
{
userPhoto: {
fieldname: 'userPhoto',
originalname: 'banner.png',
name: 'banner1415699779303.png',
encoding: '7bit',
mimetype: 'image/png',
path: 'uploads\\banner1415699779303.png',
extension: 'png',
size: 11800,
truncated: false,
buffer: null
}
}
我们使用一个回调函数去人工重命名文件,否则,在默认情况下,multer 会使用随机名称来保证文件名不冲突。
一旦 onFileUploadComplete 事件被触发,我们可设置变量 done 的值为 true,这个变量可以让我们在路由中判断文件是否上传成功。
if(done==true){
res.end("File uploaded.");
}
进行文件验证
在服务器端进行文件验证时,multer 提供了包含如下选项的 limits 参数。
- fieldNameSize-integer:文件名长度最大值(默认值:100 bytes)。
- fieldSize-integer:表单字段最大值(默认值:1MB)。
- fields-integer:非文件字段的最大值(默认值:Infinity)。
- fileSize-integer:多字段表单中,文件大小的最大值(bytes)(默认值:Infinity)。
- files-integer:多字段表单中,文件个数的最大值(默认值:Infinity)。
- parts-integer:多字段表单中,单个文件大小的最大值(字段+文件)(默认值:Infinity)。
- headerPairs-integer:多字段表单中,字段键值对个数的最大值,默认值:2000(和 node 的 http 配置相同)。
可以像这样来定义:
limits: {
fieldNameSize: 100,
files: 2,
fields: 5
}
代码如下:
app.use(multer({ dest: './uploads/',
rename: function (fieldname, filename) {
return filename+Date.now();
},
limits: {
fieldNameSize: 100,
files: 2,
fields: 5
}
}));
总结
在 express 的生态圈中,multer 是一个很不错的中间件。它可以帮助我们快速、简单地开发文件上传部分的代码。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论