koa文件上传

最新推荐文章于 2023-06-30 15:02:41 发布

zhangfei8625

最新推荐文章于 2023-06-30 15:02:41 发布

阅读量1.4w

点赞数 2

分类专栏： node.js 文章标签： koa node.js 文件上传

本文链接：https://blog.csdn.net/zhangfei8625/article/details/48344405

版权

node.js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

项目地址：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下面就会多出几个上传文件了，是不是很简单？