构建Twitter克隆应用时遇Cloudinary文件缺失错误求助

我正在跟着教程开发首个全栈Twitter克隆应用，此前的错误已自行解决，但当前开发可获取对应作者/用户推文并展示的Tweet表单时，使用Insomnia测试遇到错误（错误提示：Cloudinary返回Invalid API Key），怀疑是Cloudinary配置问题，尝试过ChatGPT及论坛方案均无效，寻求帮助。

相关代码 #

index.post.js（发布推文） #

import formidable from "formidable";
import { createTweet } from "~/server/db/tweets";
import { tweetTransformer } from "~/server/transformers/tweet.js";
import { createMediaFile } from "../../../db/mediaFiles.js";
import { uploadToCloudinary } from "../../../utils/cloudinary.js";

export default defineEventHandler(async (event) => {
  const form = formidable({});

  const response = await new Promise((resolve, reject) => {
    form.parse(event.node.req, (err, fields, files) => {
      if (err) {
        reject(err);
      }
      resolve({ fields, files });
    });
  });

  const { fields, files } = response;

  const userId = event.context?.auth?.user?.id;

  const tweetData = {
    text: String(fields.text),
    authorId: userId,
  };

  const tweet = await createTweet(tweetData);

  const filePromises = Object.keys(files).map(async (key) => {
    const file = files[key];

    const response = await uploadToCloudinary(file.filepath);

    console.log(response);

    return createMediaFile({
      url: "",
      providerPublicId: "random_id",
      userId: userId,
      tweetId: tweet.id,
    });
  });

  await Promise.all(filePromises);

  return {
    // tweet: tweetTransformer(tweet),
    files,
  };
});

tweets.js #

import { prisma } from ".";

export const createTweet = (tweetData) => {
  return prisma.tweet.create({
    data: tweetData,
  });
};

cloudinary.js #

import { v2 as _cloudinary } from "cloudinary";

const cloudinary = () => {
  const config = useRuntimeConfig();

  _cloudinary.config({
    cloud_name: config.cloudinaryCloudName,
    api_key: config.cloudinaryApiKey,
    api_secret: config.cloudinaryApiSecret,
  });

  return _cloudinary;
};

export const uploadToCloudinary = (image) => {
  return new Promise((resolve, reject) => {
    console.log(image);
    cloudinary().uploader.upload(image, (error, data) => {
      if (error) {
        reject(error);
      }
      resolve(data);
    });
  });
};

排查建议 #

• 验证Cloudinary配置参数准确性
  检查项目环境变量（如.env文件），确保cloudinaryCloudName、cloudinaryApiKey、cloudinaryApiSecret与Cloudinary控制台中的值完全一致，注意不要包含多余空格或引号。可在cloudinary.js中临时添加日志（避免泄露密钥）确认配置加载情况：

  const cloudinary = () => {
    const config = useRuntimeConfig();
    console.log("Cloudinary Cloud Name:", config.cloudinaryCloudName);
    console.log("Cloudinary API Key:", config.cloudinaryApiKey);
    _cloudinary.config({
      cloud_name: config.cloudinaryCloudName,
      api_key: config.cloudinaryApiKey,
      api_secret: config.cloudinaryApiSecret,
    });
    return _cloudinary;
  };
  

• 优化Cloudinary初始化逻辑
  当前每次调用cloudinary()都会重新配置SDK，可改为全局初始化一次，避免潜在问题：

  import { v2 as _cloudinary } from "cloudinary";
  const config = useRuntimeConfig();
  _cloudinary.config({
    cloud_name: config.cloudinaryCloudName,
    api_key: config.cloudinaryApiKey,
    api_secret: config.cloudinaryApiSecret,
  });
  
  export const uploadToCloudinary = (image) => {
    return new Promise((resolve, reject) => {
      console.log(image);
      _cloudinary.uploader.upload(image, (error, data) => {
        if (error) {
          reject(error);
        }
        resolve(data);
      });
    });
  };
  

• 确认文件路径有效性
  在index.post.js中打印file.filepath，验证formidable解析后的临时文件路径是否正确存在：

  const filePromises = Object.keys(files).map(async (key) => {
    const file = files[key];
    console.log("Upload file path:", file.filepath);
    const response = await uploadToCloudinary(file.filepath);
    // ...
  });
  

• 检查Cloudinary账户状态
  登录Cloudinary控制台，确认账户是否正常、无欠费或权限限制。

• 独立测试上传功能
  用本地已知存在的图片路径直接调用uploadToCloudinary，排除formidable解析文件的影响：

  // 在index.post.js中临时添加测试代码
  const testUpload = await uploadToCloudinary("/path/to/local/test/image.jpg");
  console.log("Test upload result:", testUpload);
  

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