使用form表单实现数据上传到服务器

一、前端form.html

<div class="container">
        <form action="http://localhost:8080/doForm" 
        enctype="multipart/form-data"
        method="POST" role="form">
            <legend>添加小组成员</legend>
            <div class="form-group">
                <label for="">名字</label>
                <input type="text" class="form-control" 
                name="name" placeholder="请输入组员的名字">
            </div>
            <div class="form-group">
                <label for="">年龄</label>
                <input type="text" class="form-control"
                 name="age" placeholder="请输入组员的年龄">
            </div>
            <div class="form-group">
                <label for="">上传头像</label>
                <input type="file" class="form-control"
                 name="logo" >
            </div>
            <button type="submit" class="btn btn-primary">添加</button>
        </form>
</div>

二、服务器代码

yarn add koa koa-router koa-static koa-body

# models/index.js
const { MongoClient} = require('mongodb');
// Connection URL
const url = 'mongodb://124.71.174.116:10040';
const client = new MongoClient(url);
const dbName = 'Student';
async function main() {
  await client.connect();
  console.log('Connected successfully to server');
  const db = client.db(dbName);
  const collection = db.collection('member');
  return collection;
}
module.exports = main;

# app.js
const koa = require("koa");
const app =  new koa();
const router = require("koa-router")();
const main = require("./models")
const koaBody = require("koa-body");
const fs = require("fs");
const path = require("path");
const static = require("koa-static");
router.get("/find",async ctx=>{
    var  collection = await main();
    var  result = await collection.find().toArray();
    ctx.body = result;
})
router.get("/add",async ctx=>{
    var  collection = await main();
    var obj = {
        name:"吴章",
        age:17
    }
    var res = await collection.find({name:obj.name}).toArray();
    if(res.length){
        ctx.body = "数据库中已经添加了这位同学"
    }else{
        var result =  await collection.insertOne(obj);
        console.log(result)
    }
})
router.post("/doForm",async ctx=>{
    var {name,age} = ctx.request.body;
    age = Number(age);
    var filename = ctx.request.files.logo.path
    /* 1、创建一个可读流 */
    var reader = fs.createReadStream(filename);
    /* 2、设置上传的文件名 */
    var uploadFile = `./static/${path.basename(filename)}`;
    /* 3、创建一个可写流 */
    var writer = fs.createWriteStream(uploadFile);
    /* 4、通过管道将可读流写入可写流 */
    reader.pipe(writer);
    // console.log(ctx.origin)
    var logo = ctx.origin +"/"+path.basename(filename);
    const collection = await main();
    await collection.insertOne({name,age,logo});
    await ctx.redirect("/find")
})
app.use(koaBody({
    multipart: true,
    formidable: {
        maxFileSize: 200 * 1024 * 1024,    
        keepExtensions: true
    }
}))
app.use(static(path.join(__dirname,"static")))
app.use(async (ctx,next)=>{
    ctx.set("Access-Control-Allow-Origin","*");
    await next();
})
app.use(router.routes());
app.listen(8080);