站长工具 JS/HTML美化 CSS在线编辑器 JS代码混淆 CSS格式化/压缩 HTML/JS互转 在线调色板
官方客服QQ号:3007971137  (一条龙搭建-联系我)
官方客服QQ号:3007947123  (一条龙搭建-联系我)

koa文件上传


//文件上传操作原理
//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下面就会多出几个上传文件了,是不是很简单?



相关链接

版权所有

发表评论