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. （转）InFluxDB数据库使用手册

    InfluxDB是一个开源的时序数据库,使用GO语言开发,特别适合用于处理和分析资源监控数据这种时序相关数据.而InfluxDB自带的各种特殊函数如求标准差,随机取样数据,统计数据变化比等,使数据统计 ...

  2. HBase scan 时 异常 ScannerTimeoutException 解决

    org.apache.Hadoop.hbase.client.ScannerTimeoutException: 60622ms passed since the last invocation, ti ...

  3. HTML5_canvas_像素操作_图片马赛克_图片反相

    canvas 像素操作 像素,即像素点,一个像素只有一个颜色 100*100 的 px 的屏幕区域有 100*100*4 个像素点,即 width*height*4 rgba(0, 0, 0, 1); ...

  4. python开发之virtualenv与virtualenvwrapper讲解

    在使用 Python 开发的过程中,工程一多,难免会碰到不同的工程依赖不同版本的库的问题: 亦或者是在开发过程中不想让物理环境里充斥各种各样的库,引发未来的依赖灾难. 此时,我们需要对于不同的工程使用 ...

  5. Safari 浏览器模拟iPhone和其他浏览器

    1.打开safari浏览器中的偏好设置 2.在偏好设置中,选择高级,勾选在菜单栏中显示开发菜单 3.打开开发,进入响应式设计模式 4.可以选择iphone 或ipad.浏览器等不同模式,进行模拟 5. ...

  6. ElasticSeaarch 遇到的问题 （-）

    1 elasticSearch 不能通过ip访问 智只能通过localhost访问,或者在外网部署的时候不能访问: elasticsearch.yml文件 中将下面的配置去掉注释符,  network ...

  7. Centos7 Nagios 搭建

    Nagios 是一款自动化运维工具,可以协助运维人员监控服务器的运行状况,并且拥有报警功能.本文章将介绍其安装方法和详细的配置方法. 总结 可以做资源,网络,应用服务的监控 配置上需要配置被监控的,服 ...

  8. python函数详解

    ''' 函数:是一段可以重复调用的代码,通过输入的参数,返回对应的结果 名字绑定的机制,把实际参数的值与形式参数的值绑定到一起 1.函数调用的时候,实际参数的值的顺序与形式参数的顺序一一对应 2.当在 ...

  9. Exception in thread "main" java.lang.IllegalStateException: Failed to read Class-Path attribute from manifest of jar file:

    表示jar所在位置文件夾中沒有下載好,將目標目錄刪除,重新maven下就好了

  10. django的闪现和增、删、改、查

    使用 messages 闪现在views.py中导入 from django.contrib import messages 在html中 {% if messages %} {% for mess ...