koa2实现简单的图片上传
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实现简单的图片上传的更多相关文章
- UEditor之实现配置简单的图片上传示例
UEditor之实现配置简单的图片上传示例 原创 2016年06月11日 18:27:31 开心一笑 下班后,阿华到楼下小超市买毛巾,刚买完出来,就遇到同一办公楼里另一家公司的阿菲,之前与她远远的有过 ...
- 一、简单的图片上传并预览功能input[file]
一.简单的图片上传并预览功能input[file] <!DOCTYPE html> <html lang="en"> <head> <me ...
- 微信小程序简单封装图片上传组件
微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...
- PHP简单的图片上传
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- UEditor之实现配置简单的图片上传示例 转
http://blog.csdn.net/huangwenyi1010/article/details/51637427 + http://blog.csdn.net/cr135810/article ...
- Webuploader 简单图片上传 支持多图上传
简介: 通过webuploader 实现简单的图片上传功能,支持多张图上传 官方文档传送门:http://fex.baidu.com/webuploader/getting-started.html# ...
- Django中怎么做图片上传--图片展示
1.首先是html页面的form表单的三大属性,action是提交到哪,method是提交方式,enctype只要有图片上传就要加这个属性 Django框架自带csrf_token ,所以需要在前端页 ...
- Asp.NetCoreWebApi图片上传接口(二)集成IdentityServer4授权访问(附源码)
写在前面 本文地址:http://www.cnblogs.com/yilezhu/p/9315644.html 作者:yilezhu 上一篇关于Asp.Net Core Web Api图片上传的文章使 ...
- 简单2步实现 asp.net mvc ckeditor 图片上传
1.打开ckeditor 包下的 config.js,添加一句 配置(PS:ckeditor 很多功能都在该配置文件里配置),如下: config.filebrowserImageUploadUrl ...
随机推荐
- Hive安装与应用过程
1. 参考说明 参考文档: https://cwiki.apache.org/confluence/display/Hive/GettingStarted 2. 安装环境说明 2.1. 环境说明 ...
- Android属性动画简单剖析
运行效果图: 先看布局文件吧,activity_main.xml: <?xml version="1.0" encoding="utf-8"?> & ...
- 0ctf2017-babyheap
前言 又是一道令人怀疑人生的 baby 题. 这道题利用思路非常巧妙,通过 堆溢出 和 fastbin 的机制构造了 information leak, 然后通过 fastbin attack 可以读 ...
- Windows 安装mkvirtualenv虚拟python环境
pip install virtualenvwrapper-win mkvirtualenv --python=python.exe 新python虚拟环境名称 使用方法 所有的命令可使用:virtu ...
- Java对于表达式中的自动类型提升
1 表达式中的自动类型提升: 表达式求值时,Java自动的隐含的将每个byte.short或char操作数提升为int类型,这些类型的包装类型也是可以的. 例如: short s1 = 1; s1 = ...
- [转]How do you build a database?
非常简短的文字,却异常明了的说明了一个数据库管理系统的核心原理,原文来自原文. Its a great question, and deserves a long answer. Most datab ...
- eclipse安装lua
单击Eclipse->Help->Install New Software… 在Work with中输入网址 Kepler - http://download.eclipse.org/re ...
- 2.Java英文缩写详解
1.JVM 2.JDK JRE 3.Java SE EE ME 4.OO OOP 5.IOC 6.SQL 7.POJO 1.JVM:Java Virtual Machine(Java虚拟机)的缩写. ...
- 自定义UITabbarController控制器
自定义UITabbarController控制器 这是定制UITabbarController的基本原理,没有进行功能性封装. 效果: 源码地址: https://github.com/YouXi ...
- [C++] 用Xcode来写C++程序[6] Name visibility
用Xcode来写C++程序[6] Name visibility 此小结包括了命名空间的一些使用细节 命名空间 #include <iostream> using namespace st ...