在Nuxt 3中使用Cloudinary上传图片时遇TypeError报错求助

这个错误的核心原因是：官方cloudinary npm包为Node.js环境设计，而Nuxt3的客户端（浏览器）环境不存在Node.js的process对象，直接在客户端调用就会触发该错误。同时，直接在客户端暴露Cloudinary密钥存在安全风险，推荐采用以下两种解决方案：

方案1：通过Nuxt服务端API处理上传（推荐） #

将Cloudinary的上传逻辑放在Nuxt的服务端路由中，服务端环境可正常访问process对象和环境变量，同时避免密钥泄露。

步骤1：创建服务端API路由 #

在server/api/upload-image.post.ts中编写上传逻辑：

import { v2 as cloudinary } from 'cloudinary'

// 初始化Cloudinary配置
cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET
})

export default defineEventHandler(async (event) => {
  // 读取客户端传来的表单数据
  const formData = await readMultipartFormData(event)
  if (!formData) {
    return createError({ statusCode: 400, statusMessage: '未提供图片文件' })
  }

  const imageFile = formData.find(item => item.name === 'image')
  if (!imageFile) {
    return createError({ statusCode: 400, statusMessage: '未找到图片文件' })
  }

  try {
    // 流式上传到Cloudinary
    const uploadResult = await new Promise((resolve, reject) => {
      const uploadStream = cloudinary.uploader.upload_stream(
        { folder: 'nuxt-uploads' }, // 自定义存储文件夹
        (error, result) => {
          error ? reject(error) : resolve(result)
        }
      )
      uploadStream.end(imageFile.data)
    })

    return { success: true, data: uploadResult }
  } catch (err) {
    return createError({ statusCode: 500, statusMessage: '上传失败', data: err })
  }
})

步骤2：配置环境变量 #

在项目根目录创建.env文件，填入Cloudinary的密钥信息：

CLOUDINARY_CLOUD_NAME=你的云名称
CLOUDINARY_API_KEY=你的API密钥
CLOUDINARY_API_SECRET=你的API密钥密码

步骤3：客户端调用API上传图片 #

在Vue组件中通过表单提交图片到服务端API：

<template>
  <input type="file" @change="handleUpload" accept="image/*">
</template>

<script setup>
const handleUpload = async (e) => {
  const file = e.target.files?.[0]
  if (!file) return

  const formData = new FormData()
  formData.append('image', file)

  try {
    const res = await $fetch('/api/upload-image', {
      method: 'POST',
      body: formData
    })
    console.log('上传成功:', res.data)
  } catch (err) {
    console.error('上传失败:', err)
  }
}
</script>

方案2：使用Cloudinary前端SDK/上传组件 #

如果需要在客户端直接处理上传，可以使用Cloudinary专为前端设计的工具，比如cloudinary-vue组件库，或者官方的上传Widget，这些工具不依赖Node.js的process对象。

使用Cloudinary上传Widget示例 #

在客户端直接引入Widget脚本，无需安装cloudinary包：

<template>
  <button @click="openUploadWidget">打开上传窗口</button>
</template>

<script setup>
const openUploadWidget = () => {
  // 初始化上传Widget
  window.cloudinary.openUploadWidget({
    cloudName: '你的云名称',
    uploadPreset: '你的上传预设', // 需要在Cloudinary后台创建无签名的上传预设
    sources: ['local', 'url'],
    multiple: false
  }, (error, result) => {
    if (!error && result?.event === 'success') {
      console.log('上传成功:', result.info)
    }
  })
}

// 挂载时引入Widget脚本
onMounted(() => {
  const script = document.createElement('script')
  script.src = 'https://widget.cloudinary.com/v2.0/global/all.js'
  document.body.appendChild(script)
})
</script>

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