如何使用 Cloudinary 小部件获取多个上传文件的数组

Question

我让用户可以在一个表单上上传多个文件。上传接口由 Cloudinary 小部件处理。然后我想在后端传递包含上传文件的数组 url 以将其存储在数据库中。

不幸的是，似乎代码是运行同步的，因此一旦第一次上传完成，它的 url 就会被推入数组并且代码停止，而不是等待其他文件获取推入数组。我只设法设置了一个 setTimeout 函数，但我承认这是一个蹩脚的解决方法。

$(document).ready(function () {
    var myWidget = cloudinary.createUploadWidget({
    cloudName: 'mycloudinaryaccountname', 
    uploadPreset: 'ml_default'}, (error, result) => { 
        if (!error && result && result.event === "success") { 
            console.log('Done! Here is the image info: ', result.info);
        fileArray = [];
        setTimeout(() => {
            fileArray.push(result.info.url)
            console.log(fileArray)
        }, 2000);    

        $('#valueUpload').val(fileArray);
        }

    }
    )

    document.getElementById("upload_widget").addEventListener("click", function(e){
        e.preventDefault();
        myWidget.open();
    }, false);
})

Answer 1

它与 setTimeout 一起工作而不是没有它的原因实际上是一个糟糕的原因 - 你不断将 fileArray 的值重置为空 ([])。 setTimeout 解决了这个问题，因为除非你有非常大的上传，否则上传整个队列的时间不到 2 秒； 1.8 秒的最终上传事件将清除阵列，但随后 0.2 秒所有阵列推送将通过。

简单的解决方案是仅在需要时将变量初始化为空，然后删除 setTimeout。您还需要确保 fileArray 变量的范围高于该函数（我已将其范围限定为 window）- 如下所示：

if (!error && result && result.event === "success") {
    console.log('Done! Here is the image info: ', result.info);
    window.fileArray = (window.fileArray || []);
    fileArray.push(result.info.url)
    console.log(fileArray)

    $('#valueUpload').val(fileArray);
}

如何使用 Cloudinary 小部件获取多个上传文件的数组

How to get the array of Multiple uploaded files with Cloudinary widget

javascript

asynchronous

cloudinary