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请求的更多相关文章

  1. Ajax方式上传文件

    用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 For ...

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

    通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...

  3. [转] 通过Ajax方式上传文件，使用FormData进行Ajax请求

    通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...

  4. Ajax方式上传文件报错"Uncaught TypeError: Illegal invocation"

    今天使用ajax上传文件时,出现了错误.数据传输的方式是通过定义formData完成的,提交的文件对象也设置为dom对象,但是还是不能发送请求.F12看到后台报了个错误:Uncaught TypeEr ...

  5. 通过Ajax方式上传文件(input file)，使用FormData进行Ajax请求

    <script type="text/jscript"> $(function () { $("#btn_uploadimg").click(fun ...

  6. 【2】通过Ajax方式上传文件(图片)，使用FormData进行Ajax请求

    HTML: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...

  7. jQuery Ajax方式上传文件实现暂停或取消上传

    未上传时要实现取消,很简单... 但如果用户点击了上传,并加载了进度信息... 2017-05-04再次改进.在上传过程中用户可以按 Esc 来取消上传(取消当前上传,或者是全部上传)... 也可以在 ...

  8. ajax如何上传文件（整理）

    ajax如何上传文件(整理) 一.总结 一句话总结:用FormData,FormData+ajax=异步上传二进制文件 <form enctype="multipart/form-da ...

  9. egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名

    egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名 评论:10 · 阅读:8437· 喜欢:0 一.需求 二.CSRF 校验 三.通过 form 表单上传文件 四.通过 ...

随机推荐

  1. 15，EasyNetQ-高级API

    EasyNetQ的使命是为基于RabbitMQ的消息传递提供最简单的API. 核心IBus接口有意避免公开AMQP概念,如交换,绑定和队列,而是实现基于消息类型的默认交换绑定队列拓扑. 对于某些场景, ...

  2. javascript事件之调整大小(resize)事件

    当浏览器窗口被调整到一个新的高度或宽度时,就会触发resize事件. var EventUtil = { addHandler: function (element, type, handler) { ...

  3. [CF566A]Matching Names

    [CF566A]Matching Names 题目大意: A组和B组各\(n(n\le10^5)\)个字符串\((\sum|S|\le8\times10^5)\),将它们两两匹配,使得每组两个字符串的 ...

  4. Codechef August Challenge 2018 : Lonely Cycles

    传送门 几波树形dp就行了. #include<cstdio> #include<cstring> #include<algorithm> #define MN 5 ...

  5. prometheus + grafana + node_exporter + alertmanager 的安装部署与邮件报警 (一)

    大家一定要先看详细的理论教程,再开始搭建,这样报错后才容易找到突破口 参考文档 https://www.cnblogs.com/afterdawn/p/9020129.html https://www ...

  6. nodejs----安装配置

    Node.js 安装配置 Node.js 安装包及源码下载地址为:https://nodejs.org/en/download/. 你可以根据不同平台系统选择你需要的 Node.js 安装包. Nod ...

  7. 第一次c++作业小结

    之前从未接触过c++,上完第一节课后也还是懵懵懂懂.当知道有作业要完成时,也是无从下手.在仔细阅读教材以及同学的帮助下,我了解了如何编写最简单的程序,也算是踏入c++的大门.希望自己的第一次作业能够符 ...

  8. 华大单片机开发板HC32F030上手入门

    HC32F030开发板(如下图所示)分为板载调试模块(左半部分)和MCU开发电路(右半部分).二者中间通过邮票孔相连,如果将板子从中间掰开,板载调试模块就可以当一个CMSIS-DAP的仿真器来使用.此 ...

  9. corefx 源码学习：SqlClient 是如何同步建立 Socket 连接的

    在昨天的技术周会上发现 EnyimMemcached 中建立 Socket 连接的代码有问题,今天坐车的时候在手机上阅读 .net core 2.2 的 SqlClient 中同步建立 Socket ...

  10. oracle04 约束，索引

    约束(constraint)一.定义 为表的列添加一些约束,以满足用户的需求.在之后的DML(select,insert,update) 数据时,若不满足约束条件,则语句不能执行 注:可以为约束起别名 ...