使用koa-generator，制作后端服务器，koa2

最新推荐文章于 2024-07-03 16:58:10 发布

HongfeiAn

最新推荐文章于 2024-07-03 16:58:10 发布

阅读量348

点赞数

分类专栏：数据库微信小程序

本文链接：https://blog.csdn.net/qq_41601327/article/details/104948369

版权

数据库同时被 2 个专栏收录

56 篇文章 1 订阅

订阅专栏

微信小程序

7 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Koa-generator创建一个Koa2后端项目，从全局安装到启动服务器，再到添加axios进行API交互。接着展示了如何实现图片上传功能，包括编辑相关文件、添加路由和配置koa-body。

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

全局安装koa-generator
创建项目
进入到项目下目录
安装一些初始的模块儿

cnpm i

启动

npm start

打开浏览器，输入

localhost：3000

在这里插入图片描述

下载axios用来交互，并放到项目中的对应文件夹中

axios下载地址

这里演示一个简单的图片上传

使用vs code打开项目目录
在这里插入图片描述
然后打开并修改

此时，
对我们上传图片的功能进行实现

当前页面内代码

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="/javascripts/axios.min.js"></script>
  </head>
  <body>
    <h1>喵喵交友-CMS管理系统</h1>
    <label for="">
      上传图片：<input type="file" id="uploadBtn">
    </label>
    <script>
      var uploadBtn=document.getElementById('uploadBtn');
      uploadBtn.onchange=function(ev){
        var file=ev.target.files[0];
        var param=new FromData();
        param.append('file',file);
        var config={
          headers:{
            'Content-Type':'multipart/form-data'
          }
        };
        axios.post('/uploadBannerImg',param,config).then(res=>{
          console.log(res.data);
        })
      }
    </script>
  </body>
</html>

接下来去实现我自己定义的接口：

打开
在这里插入图片描述
在内部添加路由来来实现自己的请求

光这样是不够滴，
这里是看不出来东西的，因为你还需要

cnpm i koa-body -S

然后再app.js内部配置

const koaBody = require('koa-body');//引入
app.use(koaBody({
    multipart: true,//是否传递多张
    formidable: {
        maxFileSize: 200*1024*1024    // 设置上传文件大小最大限制，默认2M
    }
}));

然后在本地端口3000上传一张图片试试
结果：
在这里插入图片描述

HongfeiAn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用koa-generator，制作后端服务器，koa2

全局安装koa-generator创建项目进入到项目下目录安装一些初始的模块儿cnpm i启动npm start打开浏览器，输入localhost：3000下载axios用来交互，并放到项目中的对应文件夹中axios下载地址这里演示一个简单的图片上传使用vs code打开项目目录然后打开并修改此时，对我们上传图片的功能进行实现当...
复制链接

扫一扫

专栏目录