搭建 linux + nginx + node + vue3 + mysql 个人博客 - 后台服务篇（五）

前言

什么是图文并茂？既有文字又有图片，能够更直观更清楚明白的看懂所要表达的内容。能引起读者的兴趣、为抽象文字提供视觉提示、帮助理解提示、并可以帮助读者发展阅读能力、也是一种另类的沟通方法。
想要做到图文并茂，那少不了的就是文件上传了，本博客中的文件上传功能主要就是利用nodejs中的koa-body中间件，配置支持文件上传，文件就上传到服务器中存储，接下来我就简单的介绍一下上传文件这个功能。

步骤

1. yarn add koa-body 安装 koa-body

   	yarn add koa-body
   

   

   • npm install koa-body 也可以

2. app.js 中引入 koa-body 并配置

   	// 导入 Koa
   	const Koa = require("koa");
   	const cors = require("koa2-cors");
   	const { koaBody } = require("koa-body");
   
   	// 创建 koa 实例
   	const app = new Koa();
   
   	app.use(
   		koaBody({
   			multipart: true, // 支持文件上传
   			formidable: {
   				multipart: true, // 是否支持 multipart-formdate 的表单
   			},
   		})
   	);
   	// 解决跨域 - 必须写在路由前面，不然不生效
   	app.use(cors());
   
   	// 配置路由
   	app.use(require("./routers/r-test.js").routes());
   
   	// 利用 koa 实例监听端口
   	app.listen(3000, () => {
   		console.log("服务启动成功！！！地址：localhost:3000");
   	});
   
   

   

3. controller 目录下新建 c-upload.js 文件并插入下列内容

   	// 上传组件
   	const path = require("path");
   	const fs = require("fs");
   
   	const uploadUrl = "访问地址";
   
   	const uploadFileFn = (ctx, files, data) => {
   
   		const filePath = path.join(__dirname, "../files");
   
   		// 判断 /files 文件夹是否存在，如果不在的话就创建一个
   		if (!fs.existsSync(filePath)) {
   		fs.mkdir(filePath, (err) => {
     		if (err) {
       		throw new Error(err);
   				}
   			});
   		}
   	
   		let fileReader, fileResource, writeStream;
   	
   		const fileFunc = (file) => {
   			// 读取文件流
   			fileReader = fs.createReadStream(file.filepath);
   			// 组装成绝对路径
   			fileResource = filePath + `/${file.originalFilename}`;
   		
   			// 使用 createWriteStream 写入数据
   			writeStream = fs.createWriteStream(fileResource);
   			// 使用管道流pipe拼接
   			fileReader.pipe(writeStream);
   		};
   	
   		fileFunc(files);
   	
   		if (uploadUrl) {
   			ctx.body = {
   				res: { uploadUrl },
   				code: 200,
   				message: "上传成功",
   			};
   		} else {
   			ctx.body = {
   				code: 500,
   				message: "上传失败",
   			};
   		}
   	};
   	exports.uploadFile = (ctx) => {
   		let files = ctx.request.files.file;
   		uploadFileFn(ctx, files, ctx.request.body);
   	};
   
   

   

   • 访问地址以及 filePath 根据实际情况做修改

4. routers 目录下新建 r-upload.js 文件并插入下列内容

   	const router = require("koa-router")();
   	const controller = require("../controller/c-upload");
   
   	// 上传
   	router.post("/upload",controller.uploadFile );
   
   	module.exports = router;
   
   

   

5. app.js 中配置路由

   	// 导入 Koa
   	const Koa = require("koa");
   	const cors = require("koa2-cors");
   	const { koaBody } = require("koa-body");
   
   	// 创建 koa 实例
   	const app = new Koa();
   
   	app.use(
   		koaBody({
   			multipart: true, // 支持文件上传
   			formidable: {
   				multipart: true, // 是否支持 multipart-formdate 的表单
   			},
   		})
   	);
   	// 解决跨域 - 必须写在路由前面，不然不生效
   	app.use(cors());
   
   	// 配置路由
   	app.use(require("./routers/r-test.js").routes());
   	app.use(require("./routers/r-upload.js").routes());
   	
   	// 利用 koa 实例监听端口
   	app.listen(3000, () => {
   		console.log("服务启动成功！！！地址：localhost:3000");
   	});
   
   

   

6. 利用 element-UI 的 el-upload 组件测试上传接口

   	<el-upload
       class="upload-demo"
       drag
       action="http://localhost:3000/upload"
       multiple
     >
       <i class="el-icon-upload"></i>
       <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
   

   

7. 查看本地图片，上传成功
   

到此 node + koa + koa-body 上传文件功能实现