Question

我是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”：“缺少必需参数 - 文件”}} 请帮我这样做。

Answer 1

您能否分享一下您需要的上传类型？看起来这段代码混合了有符号和无符号上传。例如，您使用unsigned_upload_tag方法，同时传递timestamp，api_key和signature，这些只是签名上传所必需的。

Answer 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

2 个答案:

服务器（Node.js）

客户端（浏览器）