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 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");

转载于:https://www.cnblogs.com/cyfhykx/p/8880104.html

koa2：通过Ajax方式上传文件，使用FormData进行Ajax请求相关推荐

jquery ajax java上传文件_jQuery Ajax方式上传文件的方法
jQuery Ajax方式上传文件用到两个对象第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这 ...
ashx获取input file 文件_通过Ajax方式上传文件(input file)，使用FormData进行Ajax请求...
一直以来上传文件都使用的是别人的组件,今天看下无刷新上传内部具体的做法.上传文件可以使用form的形式来上传,也可以通过构造formData使用ajax来上传文件: 上传图片 $(function ( ...
php ajax xmlhttpreq 上传文件 get,使用jQuery Ajax异步上传文件方法总结
一使用FormData对象上传文件 FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单".但上传文件部分只有底 ...
Ajax方式上传文件报错Uncaught TypeError: Illegal invocation
今天使用ajax上传文件时,出现了错误.数据传输的方式是通过定义formData完成的,提交的文件对象也设置为dom对象,但是还是不能发送请求.F12看到后台报了个错误:Uncaught TypeEr ...
通过$.Ajax()方式上传文件，使用FormData进行Ajax请求,应注意
首先, 在 http 中传输文件的问题.起初,http 协议中没有上传文件方面的功能,直到 rfc1867 为 http 协议添加了这个功能.当然在 rfc1867 中限定 form 的 method ...
通过Ajax方式上传文件(input file)，使用FormData进行Ajax请求
<script type="text/jscript">$(function () {$("#btn_uploadimg").click(funct ...
ajax实现上传文件的进度,基于Ajax技术实现文件上传带进度条
1.概述在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能.在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度,可以在上传文件的同时,显示文件的上传进度条.运 ...
使用插件ajaxfileupload通过ajax方式上传文件，在火狐下出错
====================================================== 注:本文源代码点此下载 ================================= ...
ajax异步上传什么意思,使用 jQuery 的 AJAX 异步上传文件
现在基本上很多网页里面都在使用 jQuery,要实现文件的异步上传,大多数的解决方法都是使用 jQuery 插件,如果你只是上传一张图片,使用插件反而觉得多余了,其实 jQuery 的 ajax() ...

koa2：通过Ajax方式上传文件，使用FormData进行Ajax请求

koa2：通过Ajax方式上传文件，使用FormData进行Ajax请求相关推荐

最新文章

热门文章