Question

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

Answer 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的回答，从一开始就为我指明了正确的方向。

Answer 2

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

这意味着您只能使用Cloudinary的“未签名”上载API，由于他们拥有的唯一前端上载SDK仅适用于jQuery ，因此这似乎已被取消。是的... jQuery –如果您从未听说过它，不会感到尴尬，我们的旧计时器曾经在过去听录音带上的必杀技时使用。

他们确实有1 broken example on CodePen通过香草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)
})

Answer 3

如果要进行客户端上载，使用我们的upload widget是一个好方法。

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

尽管与签名上传相比，它们的安全性较低，但它们需要配置upload preset，该操作只能在您端进行，并且可以立即进行更改以防止滥用。

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

3 个答案:

服务器（Node.js）

客户端（浏览器）