NodeJs form-data格式传输文件的方法


Posted in NodeJs onDecember 13, 2017

本文介绍了Node Js 使用KOA处理form-data格式传输过来的文件,分享给大家。具体如下:

使用koa有一段时间了,评价是小巧精悍,只封装了基本的如request对象和response对象到上下文中,其他功能基本上靠第三方中间件来实现。导致的问题是使用起来就不太方便了,比如用koa上传文件,网上资料有限,对于小白而言,文件上传操作就困难多了。

form表单上传文件流程(PHP和node js)

文件上传操作原理

form表单【注意:enctype=”multipart/form-data”】上传文件时,首先会将文件上传到你本机的temp目录,然后执行move_upload_file(tmpfile,newfile);然后node会不会是这样呢?答案是确定的,上传文件大家都是一样的思路。

//var tmpath = path.join(os.tmpdir(), '1.txt');//模拟上传到临时目录的文件 
  //console.log(tmpath); 
  //var ext = ".txt";//上传后生成文件的后缀,一般和上传的文件后缀一致 
  //var ph = path.join('public/upload', Date.parse(new Date()).toString() + ext);//生成新的上传文件路径全称 
  //console.log(ph); 
  //var stream = fs.createWriteStream(ph);//创建一个可写流 
  //fs.createReadStream(tmpath).pipe(stream);//可读流通过管道写入可写流

然后分析了下上面代码:

fs.createWriteStream(path.join(os.tmpdir(), Math.random().toString()));

这里创建一个可写的流对象,即创建一个表单上传后移动到新目录的空文件;而os.tmpDir()刚好是本机临时目录,上面代码表示在临时目录下生成一个随机数空文件;

part.pipe(stream);

上面的代码表示将可读流对象内容写入到可写的流对象,即上面生成的临时文件下的文件;part是将request里面的文件对象解析成可读流。

然后koa文件上传原理就清楚了。通过表单上传文件,文件默认会存放到本机临时目录下生成一个临时文件。然后通过流的形式,打开这个临时文件将数据写入到一个新地址的可写文件流里面,前提是要提前创建这个空的可写流文件,即我们上传目标文件。

KOA2解析传输过来的post form-data信息

const Koa = require('koa');
const app = new Koa();
const bodyParser = require('koa-bodyparser');
const koaBody = require('koa-body');
const router = require('./router');
// 输出请求路径,每次请求都会输出
app.use(async (ctx, next) => {
console.log(`Process ${ctx.request.method} ${ctx.request.url}...`);
await next();
});
// 文件上传,注意书写的位置很重要,否则无法上传
app.use(koaBody({ multipart: true }));
// 解析请求体
app.use(bodyParser());
// 使用路由
app.use(router());
app.listen(3000);
console.log('app started at port 3000...');

总结一下的话,就是前端用form传递文件,bodyParse解析出这个form,对应的字段是ctx.request.body.files.字段名称(eg: abc),最后通过拷贝临时的数据文件来达到上传存储的目的。

bodyParse解析出的格式:

{ fields: { aaa: '123345' },    //Text类型的解析到fields中
 files:              //File类型的解析到files中
  { 
   abc: 
   File {
    domain: null,
    _events: {},
    _eventsCount: 0,
    _maxListeners: undefined,
    size: 12525,
    path: 'C:\\Users\\DANNYJ~1\\AppData\\Local\\Temp\\upload_d896dcc755fcd36156c6814aafb7685e',
    name: 'bamboo5.png',
    type: 'image/png',
    hash: null,
    lastModifiedDate: 2017-12-08T10:17:04.355Z,
    _writeStream: [Object] } 
   } 
}

KOA2将POST传过来的文件存储到本地

var file = ctx.request.body.files.abc  //传输文件的name是abc
  console.log(ctx.request.body)
  var tmpath= file['path'];
  var tmparr =file['name'].split('.');
  var ext ='.'+tmparr[tmparr.length-1];
  var newpath =path.join('./', parseInt(Math.random()*100) + Date.parse(new Date()).toString() + ext);
  console.log(tmpath);
  console.log(newpath);
  var stream = fs.createWriteStream(newpath);//创建一个可写流
  fs.createReadStream(tmpath).pipe(stream);//可读流通过管道写入可写流

然后就会发现项目当前目录下面就会多出上传的文件了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
NodeJS 模块开发及发布详解分享
Mar 07 NodeJs
实例分析nodejs模块xml2js解析xml过程中遇到的坑
Mar 18 NodeJs
nodejs个人博客开发第一步 准备工作
Apr 12 NodeJs
使用Nodejs连接mongodb数据库的实现代码
Aug 21 NodeJs
Nodejs中使用phantom将html转为pdf或图片格式的方法
Sep 18 NodeJs
nodejs搭建本地服务器轻松解决跨域问题
Mar 21 NodeJs
详解nodejs 配置文件处理方案
Jan 02 NodeJs
PHPStorm中如何对nodejs项目进行单元测试详解
Feb 28 NodeJs
Nodejs实现用户注册功能
Apr 14 NodeJs
nodejs log4js 使用详解
May 31 NodeJs
Nodejs libuv运行原理详解
Aug 21 NodeJs
NodeJs内存占用过高的排查实战记录
May 10 NodeJs
nodejs实现截取上传视频中一帧作为预览图片
Dec 10 #NodeJs
nodejs实现大文件(在线视频)的读取
Oct 16 #NodeJs
nodejs发送http请求时遇到404长时间未响应的解决方法
Dec 10 #NodeJs
NodeJs实现定时任务的示例代码
Dec 05 #NodeJs
windows系统下更新nodejs版本的方案
Nov 24 #NodeJs
nodejs项目windows下开机自启动的方法
Nov 22 #NodeJs
使用nodeJs来安装less及编译less文件为css文件的方法
Nov 20 #NodeJs
You might like
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
PHP的介绍以及优势详细分析
2019/09/05 PHP
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
使用python开发vim插件及心得分享
2014/11/04 Python
使用Python写CUDA程序的方法
2017/03/27 Python
Python中return self的用法详解
2018/07/27 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
高二美术教学反思
2014/01/14 职场文书
文科教师毕业的自我评价
2014/01/16 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
英雄儿女观后感
2015/06/09 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript