NuxtJS2对接Cloudinary Upload API：如何删除Cloudinary资源及排查报错

核心错误原因 #

• 你在浏览器端运行的Vue组件中直接引入了Cloudinary的Node.js SDK，该SDK仅支持服务端Node环境，不兼容浏览器，依赖的Node核心API在浏览器侧不存在，所以加载时抛出了缺失split方法的错误。

需修改的内容 #

1. 移除前端组件中的Node SDK引入 #

不要在DeleteImage.vue里导入cloudinary包，浏览器端无需引入服务端SDK，直接调用Cloudinary公开HTTP接口或者走自定义服务端接口实现即可。

2. 修正签名获取逻辑 #

你当前获取签名的代码没有等待response.json()异步执行完成，也没有传递生成签名必需的参数，两种修复方案可选：

方案一：前端直接调用Cloudinary删除接口

// DeleteImage.vue 方法部分
async deleteFile() {
  this.loading = true
  // 准备签名所需参数，api_key可放在nuxt.config的publicRuntimeConfig中前端直接读取
  const signParams = {
    public_id: this.src,
    api_key: '你的Cloudinary API Key'
  }
  try {
    // 获取签名
    const signRes = await fetch('/api/cloudinary/signature', {
      method: 'POST',
      body: JSON.stringify(signParams),
      headers: {
        'Content-Type': 'application/json'
      }
    })
    const signData = await signRes.json()
    const signature = signData.signature

    // 直接调用Cloudinary公开删除接口
    const deleteRes = await fetch(`https://api.cloudinary.com/v1_1/你的Cloudinary cloud_name/image/destroy`, {
      method: 'POST',
      body: JSON.stringify({
        public_id: this.src,
        api_key: '你的Cloudinary API Key',
        signature: signature
      }),
      headers: {
        'Content-Type': 'application/json'
      }
    })
    const deleteResult = await deleteRes.json()
    console.log('删除结果', deleteResult)
  } catch (err) {
    console.error('删除出错', err)
  } finally {
    this.loading = false
  }
}

方案二：删除逻辑全放服务端（更安全，不会暴露密钥相关信息）

首先修改modules/cloudinary/index.js新增删除接口：

import { createHash } from 'crypto'
import bodyParser from 'body-parser'

export default function () {
  const config = this.options.privateRuntimeConfig.cloudinary
  // 服务端初始化Cloudinary SDK
  const cloudinary = require('cloudinary').v2
  cloudinary.config({
    cloud_name: config.cloudName,
    api_key: config.apiKey,
    api_secret: config.apiSecret
  })

  this.nuxt.hook('render:setupMiddleware', (app) => {
    app.use(bodyParser.json())
    app.use('/api/cloudinary/signature', setSignature)
    // 新增删除接口
    app.post('/api/cloudinary/delete', async (req, res) => {
      try {
        const { public_id } = req.body
        const result = await cloudinary.uploader.destroy(public_id)
        res.end(JSON.stringify(result))
      } catch (err) {
        res.statusCode = 500
        res.end(JSON.stringify({ error: err.message }))
      }
    })
  })

  function setSignature(req, res) {
    try {
      const sha1 = createHash('sha1')
      const payload = []

      Object.keys(req.body).forEach((key) => {
        payload.push(`${key}=${req.body[key]}`)
      })

      sha1.update(payload.sort().join('&') + config.apiSecret)
      res.end(
        JSON.stringify({
          signature: sha1.digest('hex')
        })
      )
    } catch (error) {
      console.error(error)
    }
  }
}

前端删除逻辑直接调用自定义服务端接口即可：

async deleteFile() {
  try {
    const res = await fetch('/api/cloudinary/delete', {
      method: 'POST',
      body: JSON.stringify({ public_id: this.src }),
      headers: { 'Content-Type': 'application/json' }
    })
    const result = await res.json()
    console.log('删除结果', result)
  } catch (err) {
    console.error('删除出错', err)
  }
}

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