直接从浏览器上传图片到 cloudinary答案

【问题标题】：Upload Images to cloudinary directly from browser直接从浏览器上传图片到 cloudinary
【发布时间】：2015-01-25 21:27:29
【问题描述】：

我是 cloudinary 的新手，我想从浏览器直接将多张图片上传到 cloudinary

我的代码是：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href="css/jquery.fileupload-noscript.css" rel="stylesheet" />
    <link href="css/jquery.fileupload-ui-noscript.css" rel="stylesheet" />
    <link href="css/jquery.fileupload-ui.css" rel="stylesheet" />
    <link href="css/jquery.fileupload.css" rel="stylesheet" />
    <title></title>
    <script src='http://code.jquery.com/jquery-1.11.1.min.js' type='text/javascript'></script>
    <script src='js/jquery.ui.widget.js' type='text/javascript'></script>
    <script src='js/jquery.iframe-transport.js' type='text/javascript'></script>
    <script src='js/jquery.fileupload.js' type='text/javascript'></script>
    <script src="js/jquery.cloudinary.js"></script>
    <script>
        $.cloudinary.config({ cloud_name: 'imagedb-com', api_key: '634138425488393' })
        $(document).ready(function () {

            var timestamps = timestamp();
            alert(timestamps);
            var data = '{"timestamp":' + timestamps + ',"callback":"http://localhost:1174/js/newjs/cloudinary_cors.html" ,"signature":"JuQVk6zYQi_kF_sT_AxHBg3upjY" ,"api_key":"634138425488393"}';


            $('.cloudinary-fileupload').fileupload({
                disableImageResize: false,
                acceptFileTypes: /(\.|\/)(gif|jpe?g|png|bmp|ico)$/i,
                maxFileSize: 20000000, // 20MB
                formData: data
            });
            $('.cloudinary-fileupload').append($.cloudinary.unsigned_upload_tag("zcudy0uz",{ cloud_name: 'imagedb-com' }));
        });

        function timestamp() {
            var last, diff;
            last = event.timeStamp;
            return last;
        }

    </script>
</head>
<body>
    <input name="file" multiple type="file"   class="cloudinary-fileupload" id="cloud" data-cloudinary-field="image_id" />
    <input type="button" value="submit" id="btn-upload"/>
</body>
</html>

这给了我一个错误的错误请求。 {"error":{"message":"缺少必需的参数 - 文件"}} 请帮我做这件事。

【问题讨论】：

标签： jquery jquery-plugins cloudinary

【解决方案1】：

您能分享一下您需要哪种上传类型吗？似乎此代码混合了已签名和未签名的上传。例如，您在使用 unsigned_upload_tag 方法的同时还传递了 timestamp、api_key 和 signature，它们仅对签名上传是必需的。

【讨论】：

我想问同样的问题。我创建了一个demo page。似乎多个直接文件上传不是开箱即用的
这里是未签名上传的示例代码：jsfiddle.net/shirlymanor/6r897ap2

【解决方案2】：

让我们都花点时间指出 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 在他们的文档中有这个。

【讨论】：

cloudinary.com/documentation/…