koa2文件上传之koa-Multer实现

场景一：单图上传：

前端代码：

axios 封装：


import axios from "axios";
const instance=axios.create({
    baseURL:"",
    timeout:5000,
})
instance.interceptors.request.use(
    (config)=>{
        return config
    },
    (err)=>{
        Promise.reject(err)
    }
)
instance.interceptors.response.use(
    (res)=>{
        return res.data
    },
    (err)=>{
        Promise.reject(error);
    }
)

const request=(url,params={},method="GET",config={})=>{
    let med=method.toUpperCase()
    switch(med){
        case "GET":
           return instance.get(url,{params})
        case "DELETE":
            return instance.get(url,{params})
        case "POST":
            return instance.post(url,params,{
                headers:{
                    ...config
                }
            })            
        case "PUT":
            return instance.put(url,params,{
                headers:{
                    ...config
                }
            })
    }

export default request

  页面调用：

<template>
  <div> 
    <p><input  ref="iptRef" multiple type="file" @change="getImgeData"></p>
    <p><button @click="trigger">上传</button></p>
  </div>
 </template>

<script setup>

import { ref } from 'vue'
import http from "../utils/utils"

const iptRef=ref(null)
const imgData=ref(null)

function upload(data){
  let fm=new FormData()
  http("/api/upload",fm,"post",{
    "Content-Type":"multipart/form-data"
  }).then(res=>{
    console.log("上传res:",res)
  }).catch(err=>{
    console.log("err:",err)
  })
}

const trigger=()=>{

  upload(imgData)

}
const getImgeData=(e)=>{

  let files=e.target.files[0];
  imgData.value=files
}
http("/api/userInfo").then(res=>{
  console.log("res:",res)
}).catch(err=>{
  console.log("err:",err)

})

</script>


<style scoped>

</style>

服务端代码：（需要注意的是我们需要实现在根目录下新建一个static/upload文件夹）

const Koa=require("koa")
const Router=require("koa-router")

const Multer=require("koa-multer")
const fs=require("fs")
const path=require("path")

const app=new Koa()
const router=new Router()

let storage=Multer.diskStorage({
    destination:function(req,file,cb){
        cb(null,"static/upload")
    },
    filename:function(req,file,cb){
        var fileFormat = (file.originalname).split(".");
        cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]);
    }
})
let upload=Multer({storage:storage})

app.use(router.routes())
app.use(router.allowedMethods())

router.get("/api/userInfo",async ctx=>{
    ctx.body={
        name:"sean",
        age:20
    }
})

router.post("/api/upload",upload.single("file"),async ctx=>{
    console.log("ctx.req:",ctx.req)
    ctx.body={
       msg:"上传成功"
    }
})

app.listen(3000,()=>{
    console.log("监听成功")
})

场景二：多图上传

前端代码：（axios封装一致）

<template>
  <div>
    <p><input  ref="iptRef" multiple type="file" @change="getImgeData"></p>
    <p><button @click="trigger">上传</button></p>
  </div>
 </template>

<script setup>
import { ref } from 'vue'
import http from "../utils/utils"

const iptRef=ref(null)
const imgData=ref(null)

function upload(data){

  let fm=new FormData()
  for(let i=0;i<data.value.length;i++){
    fm.append(`file`,data.value[i])
  }
  http("/api/upload",fm,"post",{
    "Content-Type":"multipart/form-data"
  }).then(res=>{
    console.log("上传res:",res)
  }).catch(err=>{
    console.log("err:",err)
  })
}

const trigger=()=>{
  console.log("  iptRef.value",  iptRef.value)
  upload(imgData)

}
const getImgeData=(e)=>{

  let files=e.target.files;
  imgData.value=files
}
http("/api/userInfo").then(res=>{
  console.log("res:",res)
}).catch(err=>{
  console.log("err:",err)

})


</script>


<style scoped>
.read-the-docs {
  color: #888;
}
</style>

服务端代码：

const Koa=require("koa")
const Router=require("koa-router")

const Multer=require("koa-multer")
const fs=require("fs")
const path=require("path")

const app=new Koa()
const router=new Router()

let storage=Multer.diskStorage({
    destination:function(req,file,cb){
        cb(null,"static/upload")
    },
    filename:function(req,file,cb){
        var fileFormat = (file.originalname).split(".");
        cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]);
    }
})
let upload=Multer({storage:storage})

app.use(router.routes())
app.use(router.allowedMethods())

router.get("/api/userInfo",async ctx=>{
    ctx.body={
        name:"sean",
        age:20
    }
})

router.post("/api/upload",upload.fields([{name:"file"}]),async ctx=>{
    console.log("ctx.req:",ctx.req)
    ctx.body={
       msg:"上传成功"
    }
})

app.listen(3000,()=>{
    console.log("监听成功")
})

特别注意：upload.fields的写法此处应该为一个数组。