3-koa-body实现文件的上传

1-1 初始化仓库

yarn init -y

1-2 安装依赖

yarn add koa koa-router koa-body

1-3 配置index.js

ctx.requst.files 读取上传的文件

const koa = require("koa");
const app = new koa();
const router = require("koa-router")();
const koaBody = require("koa-body");
router.post("/file", async ctx => {
    console.log(ctx.request.files);
    ctx.body = "上传成功"
})
app.use(koaBody({
    multipart: true,
    formidable: {
        maxFileSize: 200 * 1024 * 1024,    //设置默认上传文件的大小
           // 保留文件扩展名
        keepExtensions: true
    }
}))
app.use(router.routes());
app.listen(5000);

html:

@ html/file.html
<form action="http://localhost:5000/file" 
    enctype="multipart/form-data"
    method="post">
        <input type="file" name="logo"> <br>
        <input type="submit">
</form>

Tips:表单上传文件 一定要加上enctype =”multipart/form-data”

1-4 需要将数据上传到服务器

# path.basename()  可以获取路径中图片的名字及其拓展名
const path = require("path");
var file ="c:/data/logo.jpg";
console.log(path.basename(file))  //logo.jpg

# index.js
router.post("/file", async ctx => {
    var file = ctx.request.files.logo.path
    var baseName = path.basename(file);
    console.log(baseName)
    /* 1、创建一个可读流 */
    var reader =  fs.createReadStream(file);
    /* 2、设置上传图片的文件名 */
    var upFilePath =  `./static/${baseName}`;
    /* 3、创建一个可写流 */
    var writer = fs.createWriteStream(upFilePath);
    /* 4、可读流通过管道写入可写流 */
    reader.pipe(writer);

    ctx.body = "上传成功"
})

1-5 完成版

const koa = require("koa");
const app = new koa();
const fs = require("fs");
const path = require("path");
const router = require("koa-router")();
const koaBody = require("koa-body");
const static = require("koa-static");
router.post("/file", async ctx => {
    var file = ctx.request.files.logo.path
    var baseName = path.basename(file);
    console.log(baseName)
    /* 1、创建一个可读流 */
    var reader =  fs.createReadStream(file);
    /* 2、设置上传图片的文件名 */
    var upFilePath =  `./static/${baseName}`;
    /* 3、创建一个可写流 */
    var writer = fs.createWriteStream(upFilePath);
    /* 4、可读流通过管道写入可写流 */
    reader.pipe(writer);

    ctx.body = "上传成功"
})
app.use(static(path.join(__dirname,"static")))
app.use(koaBody({
    multipart: true,
    formidable: {
        maxFileSize: 200 * 1024 * 1024,    //设置默认上传文件的大小
           // 保留文件扩展名
        keepExtensions: true
    }
}))
app.use(router.routes());

app.listen(5000);

完整版2例子：
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.post("/file", async ctx => {
    console.log(ctx.request.body);  //获取填写的文字 { username: '111', userage: '111' }
    console.log(ctx.request.files.logo.path);  //获取上传的图片  C:\Users\ADMINI~1\AppData\Local\Temp\upload_12622ea329696d42e01a52d2921e92fc.jpg
    var logo = ctx.request.files.logo.path
    var reader = fs.createReadStream(logo)  
    console.log(path.basename(logo));  //upload_be79cde63b89f77423f7cce6541893fc.jpg
    var uploadFile = `./static/${path.basename(logo)}`
    var writer = fs.createWriteStream(uploadFile)
    reader.pipe(writer)
    console.log(ctx.origin+"/"+path.basename(logo));  //加上本地地址
    ctx.body = "文件上传成功"
})
app.use(koaBody({
    multipart: true,
    formidable: {
        maxFieldsSize: 200 * 1024 * 1024,
        keepExtensions: true
    }
}))
app.use(router.routes())
app.use(static(path.join(__dirname, "static")))
app.listen(7000)

html

 <form action="http://localhost:7000/file" method="post" enctype="multipart/form-data">
        <div>
            <label for="">姓名</label>
            <input type="text" name="username">
        </div>
        <div>
            <label for="年龄">年龄</label>
            <input type="text" name="userage">
        </div>
        <div>
            <label for="上传图片">上传图片</label>
            <input type="file" name="logo">
        </div>
        <input type="submit">
    </form>