koa文件上传

来源：互联网发布：淘宝网天天特价女棉衣编辑：程序博客网时间：2024/04/27 04:08

项目地址：https://github.com/zfeig/koa-mvc.git

 //文件上传操作原理//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);//可读流通过管道写入可写流

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

有句话叫办法总比困难多！首先找到了官方的例子点击打开链接

var parse = require('co-busboy');app.use(function *(next){  // ignore non-POSTs  if ('POST' != this.method) return yield next;  // multipart upload  var parts = parse(this);  var part;  while (part = yield parts) {    var stream = fs.createWriteStream(path.join(os.tmpdir(), Math.random().toString()));    part.pipe(stream);    console.log('uploading %s -> %s', part.filename, stream.path);  }  this.redirect('/');});

然后按照官方的例子试了下，然并卵。

后来结合php知识分析了下，form表单【注意：enctype="multipart/form-data"】上传文件时，首先会将文件上传到你本机的temp目录，然后执行move_upload_file(tmpfile,newfile);然后node会不会是这样呢？答案是确定的，上传文件大家都是一样的思路。

然后分析了下上面代码：

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

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

part.pipe(stream);

上面的代码表示将可读流对象内容写入到可写的流对象，即上面生成的临时文件下的文件；虽然本机跑这段代码报错，但是可以知道part是将request里面的文件对象解析成可读流。

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

由于官网上传代码跑不了，为了验证我的思路，先不管表单提交什么文件，假设在临时文件【通过os.tmpDir()获取临时目录】下上传了一个1.txt文件，然后拿到他的地址，新建目标上传地址，通过流的方式写文件，那么这个过程就完成了表单文件上传。

//文件上传操作原理模拟//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);//可读流通过管道写入可写流

</pre>上面是模拟上传操作，接下来是正式操作了，通过koa-better-body,解析请求，然后通过this.request.body或this.request.files拿到表单/上传信息，完成功能处理<p></p><p>视图 upload.ejs</p><p></p><pre name="code" class="html"><!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <link rel="stylesheet" href="/css/common.css"/></head><style>    .main {        width: 700px;        margin: 35px auto;    }</style><body><div class="main">    <form name="form" action="http://localhost:3000/upload" method="post" enctype="multipart/form-data">        <p>请认真填写以下表单数据，谢谢合作！</p>        <p><span class="title">账号：</span><input type="text" name="user"/></p>        <p><span class="title">密码：</span><input type="password" name="pwd"/></p>        <p><span class="title">性别：</span><input type="radio" name="sex" value="男"/>男  <input type="radio" name="sex" value="女"/>女</p>        <p><span class="title">籍贯：</span>            <select name="from" id="from" name="from">                <option value="北京">北京</option>                <option value="上海">上海</option>                <option value="广州">广州</option>                <option value="深圳">深圳</option>                <option value="武汉">武汉</option>            </select>        </p>        <p>            <span class="title">爱好：</span>            <input type="checkbox" name="hobby" value="游泳"/>游泳              <input type="checkbox" name="hobby" value="篮球"/>篮球              <input type="checkbox" name="hobby" value="跑步"/>跑步          </p>        <p><input type="file" name="upfile" multiple /></p>        </p>        <p><input type="submit" name="btn" value="提交"/></p>    </form></div></body></html>

路由：

var bodyParse =require('koa-better-body'); //定义一个上传表单router.get('/upload',indexCtrl.upform);  //处理上传结果router.post('/upload',bodyParse({multipart:true}),indexCtrl.doupload);

控制器：

doupload : function*(){        // console.log(this.request.body.files);//{//fields:{        ////user :'',//pwd:'',//sex:'',//from:'',//hobby[]:'',//files:{'upfile[]':[[object],[object]]}//}//}var files=this.request.body.files.upfile;if(files.length>0){for(var item in files){var tmpath= files[item]['path'];var tmparr =files[item]['name'].split('.');var ext ='.'+tmparr[tmparr.length-1];var newpath =path.join('public/upload', 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);//可读流通过管道写入可写流}}        //上传成功后的页面跳转this.redirect('/');}

然后就会发现项目publi/upload下面就会多出几个上传文件了，是不是很简单？

2 0