koa --- > 使用koa-multer上传文件+elementUI

最新推荐文章于 2024-08-12 08:54:46 发布

栗子好好吃

最新推荐文章于 2024-08-12 08:54:46 发布

阅读量1k

点赞数

分类专栏： koa 配置 JavaScript 文章标签：上传文件 koa multer 中间件 element-ui

本文链接：https://blog.csdn.net/piano9425/article/details/103326208

版权

本文介绍了如何结合koa-multer中间件和Element-UI组件，在Koa服务端处理文件上传的流程。包括核心代码展示、项目目录结构、基本思路以及前端Element-UI的文件上传组件应用。

摘要由CSDN通过智能技术生成

核心代码

const upload = require('koa-multer') ({
   dest: './public/images'});
router.post('/upload', upload.single('file'), ctx=>{
   
	console.log('file', ctx.req.file);
	console.log('body', ctx.req.body);
	ctx.body = '上传成功';
})

目录结构如下

在这里插入图片描述

基本思路

1.通过浏览器访问url: http://localhost:3000/upload
2.服务器(koa)监听到对应的路由,调用路由处理函数
3.使用nunjucks模板引擎进行渲染,并返回给浏览器
4.浏览器渲染完毕后显示出来.
5.点击上传文件->上传
6.服务端监听到上传的POST请求,进行相应的处理并将处理结果返回给前端

总体代码

/upload.js

const koa = require('koa');
const app = new koa();
const router = new require('koa-router')();
const multer = require('koa-multer');
const nunjucks = require('koa-nunjucks-2');
const path = require('path');
const fs = require('fs');

// nunjucks的配置
app.use(nunjucks({
   
    ext: 'html',
    path: __dirname,
    nunjucksConfig: {
   
        trimBlocks: true
    }
}));

// upload的配置
const upload = multer({
   
    dest: 'uploads/'
});

const