NextJs14上传图片

在nextJs14版本中，app router 还是page router中，都可以写api，这些api都是运行在server端，所以，我们可以借助nodeJs的内置Api进行复杂操作，不再仅仅限制于浏览器端的普通操作。

图片上传的示例

// /api/upload/route.ts

import { writeFile } from 'node:fs/promises'
import fs from 'fs'
import { NextResponse, NextRequest } from 'next/server'

export async function POST(req: NextRequest, res: NextResponse) {
  try {
    const formData = await req.formData()
    const path = formData.get('path')
    const file = formData.get('file') as File
    const { name, type } = file
    const ext = type.split('/')[1]
    const arrayBuffer = await file.arrayBuffer()
    const data = Buffer.from(arrayBuffer)
    const dir = path ? `public/${path}` : `public/${ext}`
    const filePath =  `public/${path ? path : ext}/${name}`
    if (!fs.existsSync(dir)) {
      await fs.mkdirSync(dir, { recursive: true })
    }
    await writeFile(filePath, data)
    return NextResponse.json({code: 200, data: path }, { status: 200 })
  } catch (error) {
    console.log('error', error)
    return NextResponse.json({ message: '上传失败', code: -1,  }, { status: 400 })
  }
}

这种方法只适用于小型文件的上传，大型文件需要使用流的方式去分割合并上传，这里不做过多演示

如果错误，欢迎大家指正