Question

我为用户提供了在表单上上传多个文件的可能性。上传界面由Cloudinary小部件处理。然后，我想将上传的文件网址传递给后端数组，以将其存储在数据库中。

不幸的是，似乎代码正在同步运行，因此，第一次上载完成后，其url将被推送到数组中，并且代码停止，而不是等待其他文件被推送到数组中。我只设法设置了setTimeout函数，但我承认这是一个la脚的解决方法。

$(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而不是不使用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);
}

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

1 个答案: