如何在Node.js应用中向ImageKit批量上传多张图片

问题修复说明 #

你的代码核心问题出在ImageKit上传参数传递错误，具体修正逻辑如下：

• 你调用fs.readFile已经拿到了文件的Buffer数据，但实际给file参数传的是req.file对象，不符合ImageKit接口要求，file参数需要传入文件Buffer、base64字符串或者文件路径
• 现有代码没有等待异步上传流程完成就触发了重定向，也没有处理上传成功/失败后的返回逻辑
• 临时存放在uploads目录的文件没有清理，长期运行会占用磁盘空间

修正后完整代码 #

const express = require('express');
const app = express();
const multer = require('multer');
const path = require('path');
const fs = require('fs');
const ImageKit = require("imagekit");

// 配置multer
const upload = multer({
    dest: "uploads/"
});

// 配置ImageKit，替换为你自己的密钥
const imagekit = new ImageKit({
    publicKey : "public_6ImvGNsOViPhZ*******",
    privateKey : "private_IZ1pjwUR9F********",
    urlEndpoint : "https://ik.imagekit.io/*****/"
});

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(express.urlencoded({extended: true}));

app.get('/upload', (req, res) => {
    res.render('index')
})

app.post('/upload', upload.single("image"), async (req, res) => {
    const tempFilePath = `uploads/${req.file.filename}`;
    try {
        // 读取文件buffer
        const fileBuffer = fs.readFileSync(tempFilePath);
        // 上传到ImageKit
        const uploadResult = await imagekit.upload({
            file: fileBuffer, // 传入读取到的buffer
            fileName: `${req.file.originalname}`, // 建议用原始文件名，保留原后缀
            tags: ["tag1", "tag2"]
        });
        // 上传成功可自行保存返回的url到数据库等
        console.log('上传成功', uploadResult.url);
        // 清理临时文件
        fs.unlinkSync(tempFilePath);
    } catch (err) {
        console.error('上传失败', err);
        // 出错也清理临时文件
        if(fs.existsSync(tempFilePath)) {
            fs.unlinkSync(tempFilePath);
        }
    }
    res.redirect('/upload');
})

// 启动服务
app.listen(3000, () => {
    console.log('服务运行在 http://localhost:3000')
})

配套检查项 #

• HTML表单需要正确设置enctype="multipart/form-data"，文件上传字段name属性为image，和upload.single("image")对应，示例表单代码：

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="image" accept="image/*">
  <button type="submit">上传</button>
</form>

• 启动前先安装所有依赖：运行npm install express multer ejs imagekit
• 生产环境建议不要把密钥硬编码在代码里，通过环境变量读取更安全

内容的提问来源于stack exchange，提问作者Alex Hopkins