koa2+ts实现上传图片

准备工作

给项目安装需要的库

yarn add koa-static @types/koa-static

yarn add koa-body

或 推荐使用yarn

npm install koa-static @type/koa-static
npm install koa-body

如安装了koa-bodyparmas 要先卸载

yarn remove koa-bodyparmas
或
npm uninstall koa-bodyparmas

开始

在index.ts 中 注册路由

  import AuthController from './auth.ts'
  const routers = new Router()
  routers.post('/upload',AuthController.upload())
  app.use(routers.routes())

index.ts

import body from 'koa-body';
import koastatic from 'koa-static';
import {resolve} from 'path' 
//注册body中间件
app.use(body({
    multipart: true, //支持图片文件
    formidable: {
        uploadDir: resolve(__dirname, './public/uploads'), //设置上传目录
        keepExtensions: true, //保留拓展名
    }
}));
//注册koa-static 这个库可以让你访问静态资源
app.use(koastatic(resolve(__dirname, 'public')))

新建auth.ts

import { Context } from "koa";
import path from "path";
type filesitemtype = {
    filepath: string,
    size: number,
    mimetype: string,
    newFilename: string,
    originalFilename: string
    url:string
}
type filestype = {
    url: string,
    size: number,
    mimetype: string,
    newFilename: string,
    originalFilename: string
}

export default class AuthController {

    public static async upload(ctx: Context) {
        const file: any = ctx.request.files;
        if (file.files instanceof Array) {
                let files: Array<filestype> = [];
                await file.files.forEach((item: filesitemtype, key: number) => {
                const {filepath,size,mimetype,newFilename,originalFilename} = item
                const basename = path.basename(filepath)
                const url = `${ctx.origin}/uploads/${basename}`
                files.push({ url, size, mimetype, newFilename, originalFilename })
            })
            ctx.body = {
                start: 200,
                data: files,
                msg: '上传成功！'
            }
        } else {
            let basename = path.basename(file.files.filepath);
            ctx.body = {
                start: 200,
                data: {
                    url: `${ctx.origin}/uploads/${basename}`
                },
                msg: '上传成功！'
            }
        }
    }
}

别忘了在项目根目录新建 public/uploads

好了看看效果吧

还有单张的