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. jquery第一篇

    1  jquery是什么 <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. <2>jQuery是继 ...

  2. Array,prototype.concat.apply与[].conat.apply.

    一直都知道JS数组Array内置对象有一个concat方法,但是也没怎么研究过,今天偶然就看了看 concat是连接一个或多个数组 返回的是连接后数组的一个副本 var oldArr=[]; var ...

  3. CentOS7.0安装Nginx 1.7.4

    一.安装准备 首先由于nginx的一些模块依赖一些lib库,所以在安装nginx之前,必须先安装这些lib库,这些依赖库主要有g++.gcc.openssl-devel.pcre-devel和zlib ...

  4. python获取文件所在目录

    1.执行的python程序获取自己文件所在目录 import os,sys os.chdir(sys.path[0]); dir_name = os.path.abspath(os.path.join ...

  5. tomcat多实例

    //结合博主之前的安装tomcat的博文一起看,tomcat多实例就是在不同路径启动多个tomcat,然后在本机不同端口启动 [root@ycj ~]# cd /usr/local/src/ [roo ...

  6. iOS 如何查看APP的jetsamEvent日志

    1.如何在iPhone上查看 设置-通用-分析-分析数据- JetsamEvent+日志 打头的系统日志. 2.如何在Mac 上查看此类分析日志 1.手机链接MAC 2.打开iTunes,点开手机图标 ...

  7. [dev][python] 从python2进阶到python3你都需要了解什么

    基于python2快速掌握python3 0. 前言 这是一篇road map. 如果你会python2,读完这篇文章之后,你将掌握python3 1. 为什么会出现python3 Why Pytho ...

  8. AIROBOT系统 之 网络配置

    需求背景 在上一个章节我们讲究了私有云的部署,但是会有一个问题,我如果在外面,如何访问家里电脑上部署的私有云服务?其实这个问题在扩大化说 就是 如何可以在家庭网络以外 可以访问到 家庭网络:公网 访问 ...

  9. Kali 开启 SSH 服务方法

    尝试了开启kali的ssh,方法如下: 1.修改sshd_config文件.命令:vim /etc/ssh/sshd_config 2.将#PasswordAuthentication no的注释去掉 ...

  10. 2018-2019-2 网络对抗技术 20165225 Exp4 恶意代码分析

    2018-2019-2 网络对抗技术 20165225 Exp4 恶意代码分析 实践目标 1.1是监控你自己系统的运行状态,看有没有可疑的程序在运行. 1.2是分析一个恶意软件,就分析Exp2或Exp ...