1、安装koa-body

2、引入koa-body

const koa = require('koa');

const fs = require('fs');

const koaBody = require('koa-body');

const route = require('koa-route');

let app = new koa();

app.use(koaBody(

{

    multipart: true,

    formidable: {

        maxFileSize: 200*1024*1024

    }

}));

3、上传文件的具体操作

const uploadFile = ctx => {

    const fileName = ctx.request.body.name;

    const file = ctx.request.files.file;

    // 创建可读流

    const render = fs.createReadStream(file.path);

    let filePath = path.join(config.BASE_PATH, 'upload/',fileName+'.'+file.name.split('.').pop());

    const fileDir = path.join(config.BASE_PATH, 'upload/');

    if (!fs.existsSync(fileDir)) {

      fs.mkdirSync(fileDir, err => {

        console.log(err)

        console.log('创建失败')

      });

    }

    // 创建写入流

    const upStream = fs.createWriteStream(filePath);

    render.pipe(upStream);

    ctx.body = '上传成功'

}

4、前端ajax请求代码

<body>

    <div>

        <form>

            <input type="text" class="filename">

            <input type="file" name="file" class="imgPath">

            <div class="submitBtn">提交</div>

        </form>

    </div>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){

            $('.submitBtn').on('click',() => {

                var params = new FormData();

                params.append('name',$('.filename').val())

                params.append('file',$('.imgPath')[0].files[0])

                $.ajax({

                    data: params,

                    url: '/uploadFile',

                    type: 'post',

                    processData: false,

                    contentType: false,

                    success: function(res) {

                        console.log(res)

                    }

                })

            })

        })

    </script>

</body>

koa2实现简单的图片上传的更多相关文章

  1. UEditor之实现配置简单的图片上传示例

    UEditor之实现配置简单的图片上传示例 原创 2016年06月11日 18:27:31 开心一笑 下班后,阿华到楼下小超市买毛巾,刚买完出来,就遇到同一办公楼里另一家公司的阿菲,之前与她远远的有过 ...

  2. 一、简单的图片上传并预览功能input[file]

    一.简单的图片上传并预览功能input[file] <!DOCTYPE html> <html lang="en"> <head> <me ...

  3. 微信小程序简单封装图片上传组件

    微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...

  4. PHP简单的图片上传

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. UEditor之实现配置简单的图片上传示例 转

    http://blog.csdn.net/huangwenyi1010/article/details/51637427 + http://blog.csdn.net/cr135810/article ...

  6. Webuploader 简单图片上传 支持多图上传

    简介: 通过webuploader 实现简单的图片上传功能,支持多张图上传 官方文档传送门:http://fex.baidu.com/webuploader/getting-started.html# ...

  7. Django中怎么做图片上传--图片展示

    1.首先是html页面的form表单的三大属性,action是提交到哪,method是提交方式,enctype只要有图片上传就要加这个属性 Django框架自带csrf_token ,所以需要在前端页 ...

  8. Asp.NetCoreWebApi图片上传接口(二)集成IdentityServer4授权访问(附源码)

    写在前面 本文地址:http://www.cnblogs.com/yilezhu/p/9315644.html 作者:yilezhu 上一篇关于Asp.Net Core Web Api图片上传的文章使 ...

  9. 简单2步实现 asp.net mvc ckeditor 图片上传

    1.打开ckeditor 包下的  config.js,添加一句 配置(PS:ckeditor 很多功能都在该配置文件里配置),如下: config.filebrowserImageUploadUrl ...

随机推荐

  1. android studio 加载libs

    eclipse 项目转 android studio libs  不能加载 导致不能导入 记录下:libs 放在和src 同路径 dependencies:增加 compile files('libs ...

  2. linux 用户管理命令useradd、passwd、who、whoami、id、w及创建用户默认值文件

    useradd /usr/sbin/useradd执行权限:rootuseradd [选项] 用户名-u UID:手工指定用户的UID号-d 家目录:手工指定用户的家目录-c 用户说明:手工指定用户的 ...

  3. 浅谈maven中的scope，systempath

    scope  maven中scope的默认值是compile scope的分类 1)compile 默认是compile.compile表示被依赖项目需要参与当前项目的编译,包括后续的测试,运行周期也 ...

  4. Jmeter 测试 JMS (Java Message Service)/ActiveMQ 性能

    前言 JMS介绍:JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送 ...

  5. 将 ExpressRoute 线路从经典部署模型转移到 Resource Manager 部署模型

    本文概述将 Azure ExpressRoute 线路从经典部署模型转移到 Azure Resource Manager 部署模型的效果. Azure 当前使用两种部署模型:Resource Mana ...

  6. 《SQL Server 2008从入门到精通》--20180703

    SELECT操作多表数据 关于连接的问题,在<SQL必知必会>学习笔记中已经讲到过,但是没有掌握完全,所以再学一下. JOIN连接 首先我们先来看一下最简单的连接.Products表和Ve ...

  7. Oracle GoldenGate OGG管理员手册（较早资料）

    第一章 系统实现简述 前言 编写本手册的目的是为系统管理员以及相关操作人员提供 Oracle  Goldengat  软 件的日常维护和使用的技术参考: 3 ORACLE 第二章 OGG 日常维护操作 ...

  8. Redis学习---Redis操作之Python连接

    PyCharm下的Redis连接 连接方式: 1. 操作模式 redis-py提供两个类Redis和StrictRedis用于实现Redis的命令,StrictRedis用于实现大部分官方的命令,并使 ...

  9. 【0】如何在电脑中使用多个python版本【python虚拟环境配置】

    问题: 该篇解决如何在同一个操作系统中可以便捷诶的使用多个python版本.有时候我们在开发的时候会同时需要python2 和python3环境,或者是需要不同的版本,都可以尽心如下配置. (1)在c ...

  10. APP案例分析——嘀嗒番茄钟

    第一部分 调研, 评测 个人第一次上手体验 一直在用时间管理的软件,但是下载了卸载,来来去去也用了很多个.这个嘀嗒番茄钟也是最近比较喜欢的软件,界面简洁,功能简单,没有那么复杂非常容易上手. 功能性的 ...