koa2：通过Ajax方式上传文件，使用FormData进行Ajax请求
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 表单上传文件 四.通过 ...
随机推荐
- vim编辑器操作命令
vim [参数] [文件 ..] 编辑指定的文件 或: vim [参数] - 从标准输入(stdin)读取文本 或: vim [参数] -t ...
- NEO智能合约开发（二）再续不可能的任务
NEO智能合约开发中,应用合约比较简单,是的你没看错,应用合约比较简单. 应用合约三部曲,发布.调用.看结果.除了看结果工具比较缺乏,发布调用neogui最起码可以支撑你测试. 鉴权合约比较麻 ...
- python实现的跳点寻路算法（JPS）
原理参考论文 代码已提交到git(https://github.com/YYRise/find_path/blob/master/jps.py)
- django——用户认证组件
用户认证 auth模块 1 from django.contrib import auth django.contrib.auth中提供了许多方法,这里主要介绍其中的三个: 1.1 .authenti ...
- zepto.js移动端城市选择插件
http://sc.chinaz.com/jiaoben/170327301850.htm
- BSUIR Open Finals
A. Game with chocolates 因为差值必须是$P$的幂,故首先可以$O(\log n)$枚举出先手第一步所有取法,判断之后的游戏是否先手必败. 对于判断,首先特判非法的情况,并假设$ ...
- python统计字词练习
方法一: import operator from nltk.corpus import stopwords stop_words = stopwords.words('English')#目的是去除 ...
- servlet数据库验证登录
servlet数据库验证登录 一.将数据库连接和验证封装为一个单独的类 import java.sql.*; public class SQLtest { // JDBC 驱动名及数据库 URL st ...
- Linux：ftp服务本地用户，虚拟用户配置
本地用户 1. 修改ftp配置文件, anonymous_enable=NO 默认为YES,修改为NO,禁止匿名访问, 监听端口,可以根据自己的需求修改,为了安全起见自定义为好 2. /etc/ ...
- 深入理解iostat
前言 iostat算是比较重要的查看块设备运行状态的工具,相信大多数使用Linux的同学都用过这个工具,或者听说过这个工具.但是对于这个工具,引起的误解也是最多的,大多数人对这个工具处于朦朦胧胧的状态 ...