koa2通过表单上传的网上很多，但通过Ajax方式上传文件，使用FormData进行Ajax请求，不好找。
参考了这个用base64上传图片的例子。/Yuki-Minakami/Koa2-FormData
我的项目列表。
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>上传</title><script src="/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 endsend_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请求》对你有帮助，请点赞、收藏，并留下你的观点哦！
