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. Android 常用知识点

    1.Kotlin 将字节大小转换为KB,MB,GB 并保留两位小数 fun getFileSize(size: Long): String { var GB = 1024 * 1024 * 1024 ...

  2. [数据结构] 快速排序C语言程序

    //由大到小//快速排序(待排序数组,左侧起点,右侧起点) void quickSort(int *array, int l, int r) { if ( l >= r) return; int ...

  3. PostgreSQL自学笔记:6 PostgreSQL函数

    6 PostgreSQL函数 6.2 数学函数 abs(x) 绝对值 pi() 圆周率π select abs(-3),pi(); cookie: MySQL中的pi()默认值3.141593, Po ...

  4. JAVA基础复习与总结<一>（2） 父类引用指向子类对象(向上转型、动态链接）

    先来看看下列代码 public class Animal { public static void main(String[] args){ Animal animal = new Cat(); // ...

  5. Android的BroadcastReceiver组件

    BroadcastReceiver的作用: BroadcastReceiver,是和Intent有很大关系的Android组件. Android中的 Intent 可以用来: 1. 在应用程序内部和应 ...

  6. Android SQL数据库应用实践 “问题点”“疑难点”“解析”

    应用 Android SQL 数据库时,遇到的问题: 场景1:Android SQL查询后,获取到Cursor并查询数据:遇到以下问题:"android.database.CursorInd ...

  7. Leetcode 记录（201~300）

    实习面试前再完成100题,争取能匀速解释清楚题 204. Count Primes 素数筛 class Solution { public: int countPrimes(int n) { ) ; ...

  8. C# Winform控件 - Form

    一.Form窗体样式 1.FormBorderStyle (1)None (2)FixedSingle (3)Fixed3D 个人感觉跟Fixedsingle区别不大 (4)FixedDialog 不 ...

  9. springboot 使用 swagger2

    段时间,同事分享了一下 swagger-ui,于是自己尝试了一下.大致的使用过程这里记录一下: 1.添加依赖 <!--swagger-ui--><dependency> < ...

  10. Resource Allocation of Yarn

    关键词:yarn 资源分配 mapreduce spark 简要指南 适合不想看太多原理细节直接上手用的人. 基本原则: container分配的内存不等于机器实际用掉的内存.NM给container ...