


//package.json
{
"name": "11.15-fileupload",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"koa": "^2.13.4",
"koa-body": "^4.2.0",
"koa-router": "^10.1.1",
"koa-static": "^5.0.0"
}
}
//add.html
//引入外部样式
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="container">
<form action="http://localhost:5000/file" method="POST" role="form" enctype="multipart/form-data">
<legend>添加小组成员</legend>
<div class="form-group">
<label for="">姓名</label>
<input type="text" class="form-control" name="username" placeholder="name">
</div>
<div class="form-group">
<label for="">年龄</label>
<input type="text" class="form-control" name="age" placeholder="age">
</div>
<div class="form-group">
<label for="">上传图像</label>
<input type="file" class="form-control" name="logo" placeholder="Input field">
</div>
<button type="submit" class="btn btn-primary">添加数据</button>
</form>
</div>
//index.js
const koa = require("koa");
const app = new koa();
const router = require("koa-router")();
const static = require("koa-static");
const koaBody = require("koa-body");
const path = require("path");
const fs = require("fs");
router.get("/",async ctx=>{
ctx.body= "连接成功"
})
router.post("/file",async ctx=>{
/* name,age */
console.log(ctx.request.body)
// console.log(ctx.request.files.logo.path)
var logo = ctx.request.files.logo.path;
/* 1、创建一个可读流 */
var reader = fs.createReadStream(logo);
/* 2、获取上传图片所在的路径和扩展名 */
// console.log(path.basename(logo))
var uploadFile = `./static/${path.basename(logo)}`;
/* 3、创建一个可写流 */
var writer = fs.createWriteStream(uploadFile);
/* 4、将可读流通过管道写入可写流 */
reader.pipe(writer);
console.log(ctx.origin+"/"+path.basename(logo))
ctx.body = "文件上传成功"
})
app.use(koaBody({
multipart: true,
formidable: {
maxFileSize: 200 * 1024 * 1024,
keepExtensions: true
}
}))
app.use(router.routes());
app.use(static(path.join(__dirname,"static")))
app.listen(5000)