Dropzone报Uncaught ReferenceError: UploadFilesToServer未定义如何解决？

问题原因分析 #

1. Uncaught ReferenceError: UploadFilesToServer is not defined 报错 #

你将UploadFilesToServer函数定义在了$(document).ready()的闭包作用域内，只有闭包内部可以访问该函数。如果你是通过HTML行内onclick属性绑定点击事件，事件触发时会从全局作用域查找函数，自然找不到，就会抛出未定义错误。

2. myDropzone.getQueuedFiles() 报错 #

Dropzone官方原生API没有提供getQueuedFiles()这个方法，调用不存在的方法自然会抛出错误。

修复方案 #

推荐用jQuery绑定点击事件的写法，不需要暴露全局函数，安全性和可维护性更好：

1. 给你的上传按钮添加id属性，示例：<button type="button" id="uploadBtn">确认上传</button>
2. 修正后的JS代码如下：

$(document).ready(function(){                        
    var myDropzone = new Dropzone("#myAwesomeDropzone", {
        autoProcessQueue: false,                
        maxFilesize: 20,  //单位MB
        addRemoveLinks: true,
        maxFiles: 10, //限制用户可拖拽上传的文件总数
        url: "/",
    });
    
    // 绑定上传按钮点击事件
    $("#uploadBtn").on("click", function() {
        // 获取所有通过校验的待上传文件列表
        const queuedFiles = myDropzone.getAcceptedFiles();
        // 获取待上传文件总数
        const fileTotal = queuedFiles.length;
        console.log("待上传文件数量：", fileTotal);
        
        // 遍历文件存入自定义数组
        const targetFileArr = [];
        queuedFiles.forEach(file => {
            // 可根据需求存储文件的对应属性
            targetFileArr.push({
                fileName: file.name,
                fileSize: file.size,
                fileType: file.type,
                rawFileObj: file
            });
        });
        console.log("处理后的文件数组：", targetFileArr);
        
        // 如需触发Dropzone自动上传队列，可调用以下方法
        // myDropzone.processQueue();
    });
});

如果你一定要保留行内onclick的绑定方式，可以把函数挂载到window全局对象上，替换上述JS代码里的点击事件绑定部分即可：

window.UploadFilesToServer = function() {
    const queuedFiles = myDropzone.getAcceptedFiles();
    // 后续文件处理逻辑和上面一致
}

内容的提问来源于stack exchange，提问作者Yogi Yang 007