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. 从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

    前言 来源:https://dailc.github.io/2018/01/21/js_singlethread_eventloop.html 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会 ...

  2. python 3 实现文件下载的方法总结

    新学的python,兴奋不已,于是网上各种资源各种爬,发现对于同样文件下载,各个下载方法的速度是不一样的(目前就知道两种方法下载#尴尬) 下面分别看下吧: 下载同样的图片,方法二的速度是方法一的二倍 ...

  3. yii2 部分很实用的代码

    检查执行的sql $query->createCommand()->getRawSql()     写日志 // 记录日志 \Yii::error('生成失败.' . $index, $t ...

  4. Ubuntu安装并使用sogou输入法

    1.下载搜狗输入法的安装包 下载地址为:http://pinyin.sogou.com/linux/ ,如下图,要选择与自己系统位数一致的安装包,我的系统是64位,所以我下载64位的安装包 2.按键C ...

  5. 容器加載Web工程的Web.xml文件介紹

    转 容器加載Web工程的Web.xml文件介紹 [-] 这篇文章主要是综合网上关于webxml的一些介绍希望对大家有所帮助也欢迎大家一起讨论 ---题记 一            Webxml详解 一 ...

  6. (98)Wangdao.com_第三十天_拖拉事件

    拖拉事件 拖拉 drag ,是指用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里. 一旦某个元素节点的 draggable 属性设为true,就无法再用鼠标选中该节 ...

  7. STL中的二分查找

    本文转载于https://blog.csdn.net/riba2534/article/details/69240450 使用的时候注意:必须用在非递减的区间中 二分查找的原理非常简单,但写出的代码中 ...

  8. spring Cache注解详解

    @CacheConfig:主要用于配置该类中会用到的一些共用的缓存配置.在这里@CacheConfig(cacheNames = "users"):配置了该数据访问对象中返回的内容 ...

  9. VS开发入门二: VS 里提示图标的含义

    VS里面的 我们写代码的过程中,有智能提示可以看到前面的小图标,初学者可以判断是什么意思哟. 1.以下是常用的几个图标 2.其他参考图标:  事件  结构  接口  枚举项  模块  映射项  内部 ...

  10. Hibernate-day02

    OID 1,对象里面没有主键的概念,对象中对应主键的属性,称为OID(对象标识符);2,OID用来唯一标明一个对象实体(加上对象类型)3,OID在对象里面不见得只有一个属性;(映射复合主键)4,OID ...