使用koa2搭建文件上传服务,后端代码

const os = require('os');
const path = require('path');
const koaBody = require('koa-body');
const Koa = require('koa');
const app = new Koa(); const fs = require("fs"); const main = async function(ctx) {
//const tmpdir = os.tmpdir(); //返回系统临时文件 const tmpdir = path.join(__dirname, "static"); const filePaths = [];
const files = ctx.request.files || {};
const params = ctx.request.body
console.log(params);
for (let key in files) {
const file = files[key];
if(Object.prototype.toString.call(file) == '[object Array]'){
for(var j = 0; j < file.length; j++ ){
witeFile(file[j]);
}
}else{
witeFile(file); }
}
function witeFile(file){
const filePath = path.join(tmpdir, file.name);
const reader = fs.createReadStream(file.path);
const writer = fs.createWriteStream(filePath);
reader.pipe(writer);
filePaths.push(filePath);
} ctx.body = filePaths;
}; app.use(koaBody({ multipart: true }));
app.use(main);
app.listen(3000);

  前端代码

		<form action="http://localhost:3000/" method="post" enctype="multipart/form-data">
<input type="text" name="name" id="" value="姓名" />
<input type="text" name="pwd" id="" value="123456" />
<input type="file" name="file" id="file" value="" multiple="multiple" />
<input type="submit" value="提交"/>
</form>  

使用ajax 上传

$("#file")[0].onchange = function(e){
console.log(this.files);
var filse = this.files;
var fd = new FormData();
fd.append("file",filse[0]);
$.ajax({
type:"post",
data:fd,
processData:false,
contentType:false,
url:"http://192.168.20.104:3000",
}).then(function(ret){
console.log(ret);
}).catch((e)=>{
console.log(e);
})
}

  

注意:

新版本的koa-body通过ctx.request.files获取上传的文件 
旧版本的koa-body通过ctx.request.body.files获取上传的文件

另外,附上express 的文件上传:

const multiparty = require('multiparty');

router.post('/file', function(req, res, next) {
//生成multiparty对象,并配置上传目标路径
const form = new multiparty.Form()
// //设置编辑
form.encoding = 'utf-8'
// //设置文件存储路径
form.uploadDir = "./public/static/"
// //设置单文件大小限制
//form.maxFilesSize = 2 * 1024 * 1024
// form.maxFields = 1000; 设置所以文件的大小总和
// 上传完成后处理 form.parse(req, (err, fields, files) => {
if (err) {
console.log("parse:",err);
res.json(configVar.fileUp);
} else {
const inputFile = files.file[0];
const uploadedPath = inputFile.path
var imgtype = inputFile.originalFilename;
const typarr = imgtype.split(".");
const typ = typarr[typarr.length -1];
const nm = new Date().getTime() + '' + Math.floor(Math.random()*1000000) ;
console.log(fields.old);
imgtype = nm + '.' + typ;
const inPath = `./public/static/${imgtype}`; //重命名的路径
// 判断是否存在./dist/static/files文件
fs.stat('./public/static', (err, stats) => {
if (JSON.stringify(stats) === undefined) {
fs.mkdirSync('./public/static')
}
storeFiles(uploadedPath, fields, inPath)
});
}
}); function storeFiles(uploadedPath, fields, inPath) {
//重命名为真实文件名
fs.rename(uploadedPath, inPath, (err) => {
if (err) {
console.log("rename:",err);
res.json(configVar.rename);
} else {
var ret = {
data:inPath.substring(8)
};
Object.assign(ret , configVar.success);
res.json(ret);
}
});
} });

  

koa2的文件上传的更多相关文章

  1. NodeJs koa2实现文件上传

    [转载自:]https://www.jianshu.com/p/34d0e1a5ac70 知识讲解 koa2框架是一个基于中间件的框架,也就是说,需要使用到的功能,比如路由(koa-router),日 ...

  2. koa2实现文件上传服务

    使用方法 方法一: 使用中间介 koa-body 方法二: 自己写个借口去接收数据流并保存 方法三: 使用 koa-body 接受文件,自己写个接口做文件保存或处理等操作 这里简单记录方法三 app. ...

  3. element-vue-koa2-mysql实现文件上传

    友情提示:这篇博客不会详细说明搭建过程 阅读群体建议:第一次使用node或者koa2写文件上传或者下载,因为你不知道用fs的哪个方法,我也是从fs里试水试了一天,各种百度才搞出来的,特别学过java的 ...

  4. koa2基于stream(流)进行文件上传和下载

    阅读目录 一:上传文件(包括单个文件或多个文件上传) 二:下载文件 回到顶部 一:上传文件(包括单个文件或多个文件上传) 在之前一篇文章,我们了解到nodejs中的流的概念,也了解到了使用流的优点,具 ...

  5. jquery.uploadify文件上传组件

    1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...

  6. 11、Struts2 的文件上传和下载

    文件上传 表单准备 要想使用 HTML 表单上传一个或多个文件 须把 HTML 表单的 enctype 属性设置为 multipart/form-data 须把 HTML 表单的method 属性设置 ...

  7. Java FtpClient 实现文件上传服务

    一.Ubuntu 安装 Vsftpd 服务 1.安装 sudo apt-get install vsftpd 2.添加用户(uftp) sudo useradd -d /home/uftp -s /b ...

  8. 小兔Java教程 - 三分钟学会Java文件上传

    今天群里正好有人问起了Java文件上传的事情,本来这是Java里面的知识点,而我目前最主要的精力还是放在了JS的部分.不过反正也不麻烦,我就专门开一贴来聊聊Java文件上传的基本实现方法吧. 话不多说 ...

  9. ,net core mvc 文件上传

    工作用到文件上传的功能,在这个分享下 ~~ Controller: public class PictureController : Controller { private IHostingEnvi ...

随机推荐

  1. PHP数组(数组正则表达式、数组、预定义数组)

    正则表达式 1.替换 $s = "hello5world"; $s = preg_replace("/\d/","#",$s); echo ...

  2. python金融与量化分析----Jupyter Notebook使用

    Jupyter Notebook(此前被称为 IPython notebook)是一个交互式笔记本,支持运行 40 多种编程语言.在本文中,我们将介绍 Jupyter notebook 的主要特性,以 ...

  3. bootstrapValidator多字段联合验证(如开始日期和结束日期中,开始日期不可晚于结束日期)

    接触bootstrapvalidator时间不久,最近需要多个字段共同验证,网上查了一下未找到,查阅api文档,发现确实可以实现. 先看dom <div class="form-gro ...

  4. AtCoder Beginner Contest 070|Elena|8.12|#471

    打了场beginner的AtCoder,也是我第一次打AtCoder,虽然AK了,但是由于手速慢+撒比,才#471… 比赛链接:https://beta.atcoder.jp/contests/abc ...

  5. HDU 5950 - Recursive sequence - [矩阵快速幂加速递推][2016ACM/ICPC亚洲区沈阳站 Problem C]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5950 Farmer John likes to play mathematics games with ...

  6. SCSS快速入门

    SCSS快速入门 1. 使用变量sass引入了变量.通过变量名来引用它们,使用$符号来标识变量.且在CSS中并无他用,不会导致与现存或未来的css语法冲突. 1-1. 变量声明sass变量的声明和cs ...

  7. 请运行TestStaticInitializeBlock.java示例,观察输出结果,总结出“静态初始化块的执行顺序”。

    答:执行顺序:静态初始化块->初始化块->构造函数 静态初始化块:在第一次加载类时执行,与对象的创建无关. 构造代码块:在调用构造方法时执行. 构造函数:在调用构造函数时执行.

  8. ATM JAVA实现 部分代码

    package score;//信1705-2 20173600 王重阳 import java.util.Scanner; public class Main { public static voi ...

  9. H. GSS and Simple Math Problem 高精度乘法模板

    链接:https://www.nowcoder.com/acm/contest/104/G来源:牛客网 题目描述 Given n positive integers , your task is to ...

  10. set,env,export,set -x,set -e;

    set 用来显示本地变量 env 用来显示环境变量 export 用来显示和设置环境变量 set 显示当前shell的变量,包括当前用户的变量 env 显示当前用户的变量 export 显示当前导出成 ...