14. 文件上传

1.0 前言

文件上传是我们工作中长用到的功能，比如，用户上传图像，上传附件，这节我们讲解基于 Koa 的文件上传。

2.0 单文件上传

2.0.1 中间件选择

在 Koa 中文件上传常用中间件有以下三个：

• koa-body
• busboy
• koa-multer

其中 koa-body 用的最多，最方便，接下来我们用它做代码案例。

2.0.2 koa-body 使用

步骤一：前端代码,通过 FormData 传递参数

$("#add-button").bind("click", function() {
        var userName = $("#userName").val()
        var userEmail = $("#userEmail").val()
        var file = $("#photo")[0].files[0]
        var formData = new FormData()
        formData.append("name", userName)
        formData.append("email", userEmail)
        formData.append("file", file)
        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "/user/add",
            data: formData, 
            processData: false,
            contentType: false,
            cache: false,
            success: function(data){
            }
        });
    })

步骤二：下载koa-body npm包

npm install koa-body --save

步骤三：在koa项目中引用koa-body中间件

// app.js
const Koa = require('koa')
const koaBody = require('koa-body');
const app = new Koa()
app.use(koaBody({
  multipart:true, // 支持文件上传
  formidable:{
    uploadDir:path.join(__dirname,'static/upload/'), // 设置文件上传目录
    keepExtensions: true,    // 保持文件的后缀
    maxFieldsSize:2 * 1024 * 1024, // 文件上传大小
    onFileBegin:(name,file) => { // 文件上传前的设置
      console.log(`name: ${name}`);
    },
  }
}));

步骤四：获取文件上传后的文件路径

通过ctx.request.files获取上传的文件。

// controller/user.js
function add(ctx) {
  // 获取文件路径，这里注意，我在前端 发起请求的时候，FormData 的 key 是 file，所以这里用 *.file，可以接着看多文件上传 
    const { path } =  ctx.request.files.file 
    const { name, email } = ctx.request.body // 获取 request body 字段
    console.log(path)
    array.push({
        id: array.length,
        imgUrl: path.split("/static")[1],
        name,
        email
    })
    ctx.body = {
        success: true
    }
}
module.exports = {
         add
}

这样就实现了单文件上传，核心的关注点是 koa-body 的使用，还有获取文件路径的方法，使用还是非常方便的。具体 Demo 代码地址可以从总结中获取

3.0 多文件上传

有了单文件上传，就有多文件上传,多文件差别主要在获取上传后文件信息不一样，其他都是一样

步骤一：前端代码,通过 FormData 传递参数

这里 key 分别为file1，file2，后端获取就呀通过file1，file2获取。

 $("#add-button").bind("click", function() {
        var userName = $("#userName").val()
        var userEmail = $("#userEmail").val()
        var files = $("#photo")[0].files
        var formData = new FormData()
        formData.append("name", userName)
        formData.append("email", userEmail)
               // 这里 key 分别为file1，file2，后端获取就呀通过file1，file2获取
        for (let index = 0; index < files.length; index++) {
            const element = files[index];
            formData.append(`file${index+1}`, element)
        }
        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "/user/add",
            data: formData, 
            processData: false,
            contentType: false,
            cache: false,
            success: function(data){
                initUserData()
            }
        });
    })

步骤四：获取文件上传后的文件路径

function add(ctx) {
  // 这里注意，我在前端 发起请求的时候，FormData 的 key 是 file，所以这里用 *.file 
    const path1 = file1.path
    const { file1, file2 } =  ctx.request.files 
    const path2 = file2.path
    const { name, email } = ctx.request.body
    console.log(path1, path2)
    array.push({
        id: array.length,
        imgUrl: path1.split("/static")[1],
        name,
        email
    })
    ctx.body = {
        success: true
    }
}

4.0 总结

这节我们一起学习了基于 koa-body 中间件 文件上传的例子，大家可以结合 Demo 好好理解下，总的来说，使用还是非常方便的，Demo 地址