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

koa2通过表单上传的网上很多，但通过Ajax方式上传文件，使用FormData进行Ajax请求，不好找。参考了这个用base64上传图片的例子。https://github.com/Yuki-Minakami/Koa2-FormData我的项目列表。index.html<!DOCTYPE html>&l...

weixin_30276935

382人浏览 · 2018-04-19 09:39:00

weixin_30276935 · 2018-04-19 09:39:00 发布

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");

转载于:https://www.cnblogs.com/cyfhykx/p/8880104.html

开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

“小满”安全车控操作系统正式在AtomGit开源

10月24日，由中国汽车工业协会指导，普华基础软件股份有限公司主办的“小满”安全车控操作系统开源发布会暨共建计划说明会成功举行。普华基础软件宣布将安全车控操作系统“小满”（简称“小满”）V24.10源代码正式在开放原子开源基金会（简称“基金会”）旗下AtomGit开源协作平台开源，并在AtomGit平