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 ...
随机推荐
- UBUNTU16.04 连接不了cn.archive.ubuntu.com
ubuntu系统更换源 更换源的方法非常简单:修改/etc/apt/sources.list文件即可 进入目录 /etc/apt cd /etc/apt修改sources.list文件 sudo vi ...
- leetCode题解之反转字符串中的元音字母
1.问题描述 Reverse Vowels of a String Write a function that takes a string as input and reverse only the ...
- 6.servlet和jsp的区别
servlet和jsp的区别 jsp作为Servlet技术的扩展,经常会有人将jsp和Servlet搞混.本文,将为大家带来servlet和jsp的区别,希望对大家有所帮助. servlet和jsp的 ...
- springCloud微服务入门
目录 前言 Eureka 注册中心server 新建 配置 服务提供者service 新建 配置 服务消费者controller 新建 配置 使用 Feign负载均衡 前言 springCloud是一 ...
- MySQL InnoDB锁机制之Gap Lock、Next-Key Lock、Record Lock解析
MySQL InnoDB支持三种行锁定方式: l 行锁(Record Lock):锁直接加在索引记录上面,锁住的是key. l 间隙锁(Gap Lock):锁定索引记录间隙,确保索引记录的间隙 ...
- 基于dispatch_after封装YXTimer
基于dispatch_after封装YXTimer 本人根据dispatch_after封装了一个定时器,支持block以及代理的方式来激活定时器,适用于对精度要求低,耗时短的地方,高端大气上档次,低 ...
- PHP-7的FPM服务的启动
1.PHP 7的FPM服务位置:/ect/init.d/php7.0-fpm 2.启动:sudo service php7.0-fpm reload
- 事后诸葛亮之Alpha十天冲刺之失败总结
参考自构建之法p341页的模板 首先自己预计了一下,项目gg的可能有百分之50这里面有百分之80是我的责任.冲刺失败我承担主要责任. 1.设想和目标: 1.计划实现类似华为云的小功能之团队合作开发功能 ...
- 第一次项目冲刺(Alpha版本)2017/11/19
一.当天站立式会议 会议内容 1.对数据库的设计的进一步讨论 2.讨论SSH一些配置细节 3.分配今天的任务 二.任务分解图 三.燃尽图 四.心得 1.零散的时间要利用起来,追上计划的进度. 2.在小 ...
- 使用 FRP 反向代理实现 Windows 远程连接
互联网普及率的日渐攀升与 IPv4 资源的持续减少,现在大部分家庭宽带都不会分配公网 IP ,这使一些网络应用的实现多了些困难,像个人的 NAS 和一些智能家居设备.对于分配公网 IP ,各地运营商的 ...