NextJS 实现文件上传功能

引言

在使用 NextJS 开发项目的过程中，不可避免的需要实现上传文件的功能。如上传图片、导入 excel 数据等。

第一次实现在 NextJS 中接收 form 表单，遇到了一些问题，在这里记录一下解决的过程，分享给需要的开发者。

实现

pages/api/upload.ts 接收并移动文件

import { NextApiRequest, NextApiResponse } from "next"
import formidable from "formidable"
import { existsSync, mkdirSync, renameSync } from "fs"
import { join } from "node:path"

export const config = {
    api:{
        bodyParser: false  // 禁用 NextJS 默认的 body 解析
    }
};

export default async function(req:NextApiReqeust, res:NextApiResponse){
    if (req.method !== "POST") {
        throw new Error("method not allowed")
    }

    // 接收文件
    const [files,fields] = await formidable({
        keepExtensions: true
    }).parse(req);
    
    const file = files.file[0];
    if(file){
        // 移动文件        
        const path = join("./upload")
        if (!existsSync(path)) {
            mkdirSync(path)
        }
        renameSync(filepath, join("./upload", newFilename))
    
        // 其他业务逻辑... 如写入数据库记录/读取 excel 等
        
        res.json({file: path + '/' + newFilename})
    }else{
        res.status(400).json({errmsg:'empty file'})
    }      
}

客户端上传文件

async uploadFile(file){
    const res = await axios.postFormData('/api/upload',{
        file,
        // others 
    });
    // 业务逻辑
}

参考

• Api Routes - custom config

Thanks

感谢阅读！本主长期做小程序开发
最近在使用 NextJS 尝试开发一个 CRM 项目，扩展一下后端的开发能力
如有需求和问题沟通咨询，可以留言或私信哦