koa2通过表单上传的网上很多，但通过Ajax方式上传文件，使用FormData进行Ajax请求，不好找。
参考了这个用base64上传图片的例子。https://github.com/Yuki-Minakami/Koa2-FormData
我的项目列表。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous">
</script>
</head>
<body>
<div style="margin-top: 1%;">
<input type="file" id="uploadingfile">
<br/><br/>
<button id="subbtn">提交</button>
<script>
$(function () {
$("#subbtn").on("click",function () {
let data = new FormData();
data.append("file",document.getElementById('uploadingfile').files[0]);
data.append("info","附带信息");
$.ajax({
url : "/uploadimgs",
type : "POST",
processData: false,
contentType: false,
data : data,
success : function(data){
console.log(data);
}
});
});
})
</script>
</div>
</body>
</html>
app.js
const Koa = require("koa");
const router = require("koa-router")();
const multiparty = require("multiparty");
const app = new Koa();
app.use(router.routes());
router.get("/",(ctx)=>{
ctx.body = require("fs").readFileSync("./index.html","utf-8");
});
let form = new multiparty.Form({uploadDir:'./images/' });
router.post('/uploadimgs',async (ctx) => {
async function loadimg() {
await form.parse(ctx.req,function(err,fields,files){
if(err){throw err; return;}
console.log(fields);//除文件外的其他附带信息
console.log(files);//文件信息
return ;
});
}
await loadimg().then(v=>{
ctx.body="上传成功";
});
});
app.listen(3000);
console.log("listen on 3000");
上面的app.js没做任何判断，就直接报成功，感觉不好，所以完善一下。
修改后的app.js
const Koa = require("koa");
const router = require("koa-router")();
const multiparty = require("multiparty");
const app = new Koa();
app.use(router.routes());
router.get("/",(ctx)=>{
ctx.body = require("fs").readFileSync("./index.html","utf-8");
});
router.post('/uploadimgs',async (ctx) => {
let errsign={status:500,exception:null};
let datasign={status:200,recordset:null};
function loadimg() {
let send_json={};
return new Promise((resolve,reject)=>{
let form = new multiparty.Form({uploadDir:'./images/' });
form.parse(ctx.req,function(err,fields,files){
if(err){
// throw err;
console.log(err);//Error: write after end
send_json={
exception:"解析失败",
err:false
};
resolve(send_json);
// return send_json;
}else{
// console.log(fields);//除文件外的其他附带信息
// console.log("files = ",files);//文件信息
if(files!==undefined&&files!=={}&&files.file!==undefined){
// console.log(files.file);
if(files.file.length>0){
let filename = files.file[0].path;
let filetype = files.file[0].headers['content-type'];
let realname = files.file[0].originalFilename;
// console.log("filename = ",filename);
// console.log("filetype = ",filetype);
// console.log("realname = ",realname);
if(filetype.indexOf("image/")>=0){
send_json={
recordset:"上传成功",
err:true
};
resolve(send_json);
}else{
send_json={
exception:"上传失败",
err:false
};
fs.unlinkSync(filename);//删除非图片文件
resolve(send_json);
}
}
}else{
send_json={
exception:"未上传文件",
err:false
};
resolve(send_json);
}
}
});
});
}
await loadimg().then(r=>{
// console.log("r = ",r);
if(r.err===false){
errsign["exception"]=r.exception;
ctx.body=errsign;
}else{
datasign["recordset"]=r.recordset;
ctx.body=datasign;
}
});
});
app.listen(3030);
console.log("listen on 3030");
koa2：通过Ajax方式上传文件，使用FormData进行Ajax请求的更多相关文章
-
Ajax方式上传文件
用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 For ...
-
通过Ajax方式上传文件，使用FormData进行Ajax请求
通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...
-
[转] 通过Ajax方式上传文件，使用FormData进行Ajax请求
通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...
-
Ajax方式上传文件报错";Uncaught TypeError: Illegal invocation";
今天使用ajax上传文件时,出现了错误.数据传输的方式是通过定义formData完成的,提交的文件对象也设置为dom对象,但是还是不能发送请求.F12看到后台报了个错误:Uncaught TypeEr ...
-
通过Ajax方式上传文件(input file)，使用FormData进行Ajax请求
<script type="text/jscript"> $(function () { $("#btn_uploadimg").click(fun ...
-
【2】通过Ajax方式上传文件(图片)，使用FormData进行Ajax请求
HTML: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...
-
jQuery Ajax方式上传文件实现暂停或取消上传
未上传时要实现取消,很简单... 但如果用户点击了上传,并加载了进度信息... 2017-05-04再次改进.在上传过程中用户可以按 Esc 来取消上传(取消当前上传,或者是全部上传)... 也可以在 ...
-
ajax如何上传文件（整理）
ajax如何上传文件(整理) 一.总结 一句话总结:用FormData,FormData+ajax=异步上传二进制文件 <form enctype="multipart/form-da ...
-
egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名
egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名 评论:10 · 阅读:8437· 喜欢:0 一.需求 二.CSRF 校验 三.通过 form 表单上传文件 四.通过 ...
随机推荐
-
Android下载图片/调用系统相机拍照、显示并保存到本地
package com.example.testhttpget; import java.io.BufferedReader; import java.io.FileNotFoundException ...
-
ehcache2拾遗之write和load
问题描述 在cache系统中writeThrough和writeBehind是两个常用的模式. writeThrough是指,当用户更新缓存时,自动将值写入到数据源. writeBehind是指,在用 ...
-
【BZOJ-1492】货币兑换Cash DP + 斜率优化 + CDQ分治
1492: [NOI2007]货币兑换Cash Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 3396 Solved: 1434[Submit][Sta ...
-
g++/gcc 链接头文件 库 PATH
转自http://blog.csdn.net/kankan231/article/details/24243871 在Linux下编译链接或运行c/c++程序时可能会遇到找不到头文件,找不到库文件的错 ...
-
wamp图标黄色的另一种可能原因
学习php用的是wamp即windows+apache+mysql+php,但是当启动的时候,图标为黄色(正常应为绿色),开始以为是端口的问题,但是将端口改掉依旧如此,后来发现是机器装的sqlserv ...
-
mpvue小程序开发之 wx.getUserInfo获取用户信息授权
一.背景 在使用美团的mpvue2.0框架搭建起小程序项目后,做获取用户信息时遇到一些问题:微信小程序更新api后,获取用户信息只能通过button上的绑定方法 来获取用户信息,vue上方法绑定不能直 ...
-
UOJ#465. 【HNOI2019】校园旅行 其他
原文链接www.cnblogs.com/zhouzhendong/p/UOJ465.html 前言 tmd并查集写挂,调到自闭. cly和我写挂了同一个地方. 一下救了两个人感觉挺开心. 题解 首先直 ...
-
Vue学习-基本指令
一.关于vue介绍:https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247485737&idx=1&sn=14fe ...
-
新建git并将本地代码上传到分支
1 查看远程分支 $ git branch -a * br-2.1.2.2 master remotes/origin/HEAD -> origin/master remotes/origin/ ...
-
JFinal Web开发学习(五)注册界面和后端验证
效果: 直接点击注册后 : 后端验证是可靠地,前端js验证是不可靠的.只需要在浏览器删除js验证代码即可突破js验证. 1.注册界面 在WebRoot下新建regist.jsp <%@ page ...