Node.js 使用 Koa 处理 form-data 文件上传详解

作者:服务小站

时间:2026-10-22

浏览:478

本文详解在 Node.js Koa 框架中如何处理 form-data 格式的文件上传。通过配置 koa-body 中间件解析 multipart 数据,利用文件流将系统临时目录中的临时文件移动至目标存储路径,实现完整的文件上传与存储逻辑。

文章目录

Node.js Koa 文件上传概述

本文介绍如何在 Node.js 中使用 Koa 框架处理通过 form-data 格式传输的文件,供读者参考。

使用 Koa 一段时间后,其特点可概括为小巧精悍。它仅将 request 和 response 对象封装到上下文中,其他功能主要依赖第三方中间件实现。这导致使用门槛较高,例如文件上传相关的网络资料较少,对初学者而言操作难度较大。

form 表单上传文件的流程(涉及 PHP 和 Node.js)

文件上传的操作原理

文件上传原理与流程

当 form 表单设置 enctype="multipart/form-data" 上传文件时,系统首先将文件保存至本机的 temp 目录,随后执行 move_upload_file(tmpfile, newfile) 将其移动至新位置。Node.js 的处理思路与此一致。


  //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 信息

KOA2 解析 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.字段名称(例如: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);//可读流通过管道写入可写流

执行后,项目当前目录下便会多出上传的文件。

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

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章