NuxtJS2 和 Cloudinary 上传 API：如何从 Cloudinary 中删除资产？

Question

我不熟悉将 Cloudinary API 与 NuxtJS 一起使用。如何使用 NuxtJS 应用从 Cloudinary 帐户中删除图像/资产？

这是我尝试过的：

modules/cloudinary/index.js：（创建安全签名和配置信息）

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

export default function () {
  const config = this.options.privateRuntimeConfig.cloudinary

  this.nuxt.hook('render:setupMiddleware', (app) => {
    app.use(bodyParser.json())
    app.use('/api/cloudinary/signature', setSignature)
  })

  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)
    }
  }
}

DeleteImage.vue:

<script> 
import cloudinary from 'cloudinary' <--// Node SDK: https://cloudinary.com/documentation/node_integration
export default {
  data() {
    return {
      loading: false,
      src: null
    }
  },
  methods: {
    async deleteFile() {
      const response = await fetch('/api/cloudinary/signature', {
        method: 'POST',
        // body: JSON.stringify(options),
        headers: {
          'Content-Type': 'application/json'
        }
      })

      const signature = response.json.signature
      console.log(signature) // <-- console logging here gets me the signature
      try {
        const asset = await cloudinary.v2.uploader.destroy(this.src, signature)
        console.log(asset)
      } catch (error) {
        console.error('error deleting image', error)
      }
    },
    
  }
}
</script>

我现在收到控制台错误：

cloudinary.js?9447:1 Uncaught TypeError: Cannot read properties of undefined (reading 'split')
    at Object.eval (cloudinary.js?9447:1)
    at eval (cloudinary.js:10)
    at Object../node_modules/cloudinary/cloudinary.js (app.js:5178)
    at __webpack_require__ (runtime.js:854)
    at fn (runtime.js:151)
    at eval (index.js?!./node_modules/vue-loader/lib/index.js?!./components/UploaderImage.vue?vue&type=script&lang=js&:30)
    at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./components/UploaderImage.vue?vue&type=script&lang=js& (app.js:1546)
    at __webpack_require__ (runtime.js:854)
    at fn (runtime.js:151)
    at eval (UploaderImage.vue?9448:1)

我不知道我在做什么。对不起！

Answer 1

可以通过Destroy API（用于单个文件删除）或Admin API（用于批量删除）从您的 Cloudinary 帐户中删除资源。但是，两者都要求您使用您帐户的api_secret。由于确实不建议在客户端代码中包含您帐户的api_secret，因此使用这两个 API 删除资源应该从服务器端完成。

话虽如此，也可以通过自动过期的令牌（从上传时间起最多 10 分钟）从客户端删除。了解更多信息： https://cloudinary.com/documentation/upload_images#deleting_client_side_uploaded_assets