我如何使用签名签名上传到 cloudinary

Posted 2023-03-25

【中文标题】我如何使用签名签名上传到 cloudinary

【英文标题】：How can i upload to cloudinary using signed signature

【发布时间】：2019-05-25 04:50:31

【问题描述】：

我需要保护客户端上传到 cloudinary， 所以我使用 cloudinary api_secret 密钥和时间从我的节点服务器端生成了一个签名令牌， 使用此代码 api_sign_request = function(params_to_sign, api_secret)。在这些之后如何使用此令牌从前端将图像上传到云端

【问题讨论】：

先上传到你的服务器，然后从你的服务器上传到云服务器。

@PrashantPokhriyal 现在我只使用这种方法，我需要将其更改为客户端以获得更好的性能

如果您想转移到客户端，那么这不是一个好的设计，因为未经身份验证的用户也可以使用它并可以上传到您的云服务器。 Cloudnary 确实提供了 jquery sdk 和 javascript sdk 用于集成，并且您不需要 nodejs。但正如我所说，这不是好的设计。如果你真的想去客户端，那么我建议你使用upload widget

【参考方案1】：

让我们都花点时间指出 Cloudinary 的文档是多么可怕。这很容易是我见过的最糟糕的。噩梦燃料。

现在我已经摆脱了这种想法......我真的需要能够做到这一点，而且我花了太长时间把头撞在墙上，这本来应该非常简单。在这里……

服务器（Node.js）

您需要一个向前端返回签名-时间戳对的端点：

import cloudinary from 'cloudinary'

export async function createImageUpload() 
  const timestamp = new Date().getTime()
  const signature = await cloudinary.utils.api_sign_request(
    
      timestamp,
    ,
    process.env.CLOUDINARY_SECRET
  )
  return  timestamp, signature 

客户端（浏览器）

客户端向服务器请求签名-时间戳对，然后使用它上传文件。示例中使用的文件应来自 <input type='file'/> 更改事件等。

const CLOUD_NAME = process.env.CLOUDINARY_CLOUD_NAME
const API_KEY = process.env.CLOUDINARY_API_KEY

async function uploadImage(file) 
  const  signature, timestamp  = await api.post('/image-upload')
  const form = new FormData()
  form.append('file', file)
  const res = await fetch(
    `https://api.cloudinary.com/v1_1/$CLOUD_NAME/image/upload?api_key=$API_KEY&timestamp=$timestamp&signature=$signature`,
    
      method: 'POST',
      body: form,
    
  )
  const data = await res.json()
  return data.secure_url

就是这样。这就是它所需要的。如果只有 Cloudinary 在他们的文档中有这个。

非常感谢@jpschroeder 的回答，它从一开始就为我指明了正确的方向。

【讨论】：

由于某种原因，我无法让它与 axios 一起使用，而使用 fetch 它可以完美运行。谢谢，这绝对是最简单的方法！

【参考方案2】：

据我所知，目前（2020 年 1 月）没有记录的方式来生成用于上传文件的安全签名 URL like you would with S3。这并不是说它不能完成，因为文档暗示有办法做到这一点，但我似乎无法找到解释它的地方。

这意味着您只能使用 Cloudinary 的“未签名”上传 API，这似乎在这一点上被放弃了，因为 他们拥有的唯一前端上传 SDK 仅适用于 jQuery。是的...jQuery – 如果您从未听说过它，请不要感到尴尬，我们这些老前辈过去常常在我们听磁带上的涅槃时使用它。

他们确实有1 broken example on CodePen 通过 vanilla JS 从浏览器进行未签名上传。我个人的 axios/ES2015 例子是这样的：

import axios from 'axios'

const cloudName = 'foofoo'
const unsignedUploadPrefix = 'foobar'
const url = `https://api.cloudinary.com/v1_1/$cloudName/upload`

document.getElementById('fileinput').addEventListener('change', (e) => 
  const data = new FormData()  
  const file = e.target.files[0]
  data.append('upload_preset', unsignedUploadPrefix)
  data.append('file', file)
  axios.post(url, data)
)

【讨论】：

我不明白为什么他们没有与此答案中发布的代码完全相同的流程 - 但对于签名上传 - 例如需要令牌的端点。没有人愿意安装他们笨拙的庞大库

【参考方案3】：

如果您想进行客户端上传，使用我们的upload widget 是一个不错的选择。

您还可以尝试使用我们也支持的浏览器使用unsigned uploads。

虽然它们不如签名上传安全，但它们需要配置 upload preset，这只能由您自己完成，并且可以立即更改以防止滥用。