下面使用实现文件上传功能，先新建文件夹，结构如下：
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>koa 实现文件上传功能</title> </head> <body> <form action="/login" method="POST" enctype="multipart/form-data"> 用户名： <input type="text" name="username" /> <br /> 密码： <input type="password" name="password" /> <br /> 头像： <input type="file" name="avatar" /> <br /> <button>提交</button> </form> </body> </html>
test.txt
凯小默 的 博客
这里主要使用上次开发的 kaimo-koa-bodyparser 中间件，然后进行类型区分开发
const querystring = require("querystring"); const path = require("path"); const fs = require("fs"); const uuid = require("uuid"); console.log("使用的是 kaimo-koa-bodyparser 中间件", uuid.v4()); /** * @description 实现根据一个字符串来分割 buffer * @param {String} sep 分割字符串 * @return {Array} 返回 buffer 数组 * */ Buffer.prototype.split = function (sep) { let sepLen = Buffer.from(sep).length; let arr = []; let offset = 0; let currentIndex = 0; // 先赋值完在对比 while ((currentIndex = this.indexOf(sep, offset)) !== -1) { arr.push(this.slice(offset, currentIndex)); offset = currentIndex + sepLen; } // 剩余的也 push 到数组 arr.push(this.slice(offset)); return arr; }; // 测试 const buffer = Buffer.from("凯小默1--凯小默2--凯小默3"); console.log(buffer.split("--")); // 中间件的功能可以扩展属性、方法 module.exports = function (uploadDir) { return async (ctx, next) => { await new Promise((resolve, reject) => { const arr = []; ctx.req.on("data", function (chunk) { arr.push(chunk); }); ctx.req.on("end", function () { if (ctx.get("content-type") === "application/x-www-form-urlencoded") { const result = Buffer.concat(arr).toString(); console.log("kaimo-koa-bodyparser-result--x-www-form-urlencoded-->", result); ctx.request.body = querystring.parse(result); } if (ctx.get("content-type").includes("multipart/form-data")) { const result = Buffer.concat(arr); console.log("result.toString----->", result.toString()); console.log("result----->", result); let boundary = "--" + ctx.get("content-type").split("=")[1]; console.log("分隔符 boundary----->", boundary); // 需要去掉无用的头尾 let lines = result.split(boundary).slice(1, -1); console.log("lines----->", lines); // 服务器收取到的结果全部放在这个对象中 let obj = {}; lines.forEach((line) => { // 通过两个回车截取 let [head, body] = line.split("\r\n\r\n"); head = head.toString(); console.log("head----->", head); // 获取到头部的 let key = head.match(/name="(.+?)"/)[1]; console.log("key----->", key); // 根据 head 里是否有 filename 去区分是否是文件 if (!head.includes("filename")) { console.log("body----->", body); console.log("body.toString----->", body.toString()); // 去掉尾部无用字符 obj[key] = body.toString().slice(0, -2); } else { // 是文件，文件上传名字需要的是随机的，这里使用 uuid 库生成 // 拿到内容，去头尾 let content = line.slice(head.length + 4, -2); console.log("uploadDir----->", uploadDir); let filePath = path.join(uploadDir, uuid.v4()); console.log("filePath----->", filePath); obj[key] = { filePath, size: content.length }; fs.writeFileSync(filePath, content); } }); ctx.request.body = obj; } resolve(); }); }); await next(); // 完成后需要继续向下执行 }; };
添加 fileParser.js 测试代码，upload 文件夹为上传文件的放置的地方
const Koa = require("koa"); const path = require("path"); const static = require("koa-static"); // 使用自己实现的 koa-bodyparser const bodyParser = require("./kaimo-koa-bodyparser"); const app = new Koa(); app.use(static(path.resolve(__dirname, "public"))); // 传入需要保存上传文件的文件夹 app.use(bodyParser(path.resolve(__dirname, "upload"))); app.use(async (ctx, next) => { console.log(ctx.path, ctx.method); if (ctx.path == "/login" && ctx.method === "POST") { ctx.body = ctx.request.body; console.log("ctx.body-------->", ctx.body); } else { await next(); } }); app.on("error", function (err) { console.log("error----->", err); }); app.listen(3000);
启动服务，访问 http://localhost:3000/login
nodemon fileParser.js
填写数据，上传 test.txt 文件
最后可以看到文件已经上传到了 upload 文件夹
