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

Question

我允许用户在表单上上传多个文件。上传接口(interface)由 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 变量的范围高于该函数(我已将其范围设置为窗口) - 像这样:

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);
}