概述

由于之前写文章上传图片功能没做，都是从简书写完再复制过来，这样导致外链过多，而且太麻烦，所以完善了一下文件上传功能。

一.方法

由于我的博客是用nodejs-koa2做的，所以要实现图片上传功能有三种方法：

1：koa-body

2：busboy

3：koa-multer

因为我项目用的是koa-body，所以本文主要讲述的是使用koa-body进行文件上传；

二.实现步骤

1.安装koa-body依赖

npm install koa-body --save    或   cnpm install koa-body --save

2.在项目中引入koa-body

// 判断是单文件还是多文件上传
if(ctx.request.files.file.length > 1){
    // 多个文件上传
    const files = ctx.request.files.file; // 获取上传文件
    let dataList = []; //存储返回文件名
    for(let i=0;i        // 创建可读流
        const reader = fs.createReadStream(files[i].path);
        // 修改文件的名称
        var myDate = new Date();
        var newFilename = myDate.getTime()+"."+files[i].name.split(".")[1];
        var uploadPath = path.join("/home/img/upload") + `/${newFilename}`;
        // 创建可写流
        const upStream = fs.createWriteStream(uploadPath);
        // 可读流通过管道写入可写流
        reader.pipe(upStream);

        // 存入文件名
        dataList.push("https://www.btluo.com/img/upload/" + newFilename);
    }
    // 返回保存文件路径
    return ctx.body = { code: 0, data: dataList };
}else{
    // 单个文件上传
    const file = ctx.request.files.file;
    // 创建可读流
    const reader = fs.createReadStream(file.path);
    // 修改文件的名称
    var myDate = new Date();
    var newFilename = myDate.getTime()+"."+file.name.split(".")[1];
    console.log(newFilename);
    var uploadPath = path.join("/home/img/upload") + `/${newFilename}`;
    //创建可写流
    const upStream = fs.createWriteStream(uploadPath);
    // 可读流通过管道写入可写流
    reader.pipe(upStream);
    //返回保存的路径
    return ctx.body = { code: 0, data: ["https://www.btluo.com/img/upload/" + newFilename] };
}

注：新版本的koa-body是通过ctx.request.files获取上传的文件，旧版本的koa-body是通过ctx.request.body.files获取上传的文件 ；

附上前端ajax请求代码截图：

$(document).ready(function(){
    $(".submitBtn").on("click",() => {
        var params = new FormData();
        params.append("name",$(".filename").val())
        params.append("file",$(".imgPath")[0].files[0])
        $.ajax({
            data: params,
            url: "http://www.btluo.com/api/uploadFile",
            type: "post",
            processData: false,
            contentType: false,
            success: function(res) {
                console.log(res)
            }
        })
    })
})