Dropzone.js 4.3.0中设置带记录ID的移除链接URL的最佳实践咨询

好问题！你观察得很到位——直接修改file._removeLink.href确实不是Dropzone推荐的做法，而且存在你担心的潜在问题。下面我来拆解一下当前方法的问题，以及正确的实现方式：

当前方法的问题 #

你现在的实现虽然能运行，但有两个核心问题：

1. 依赖内部私有属性：_removeLink是Dropzone的内部私有属性（以下划线开头），官方并没有承诺这个属性会在后续版本中保持不变。如果Dropzone更新了内部DOM结构或属性命名，你的代码可能直接失效。
2. 安全与规范问题：用GET请求来执行删除操作不符合RESTful设计规范，而且GET请求容易被CSRF攻击利用（比如恶意站点通过图片加载触发请求），存在安全风险。

正确的实现方案 #

Dropzone提供了专门的钩子和事件来处理文件移除逻辑，推荐两种更可靠的方式：

方案1：使用removedfile事件处理删除（推荐） #

这是Dropzone官方推荐的方式，通过监听removedfile事件，在文件被移除时发送安全的DELETE请求到API，同时带上服务器返回的ID。

修改后的代码示例：

function HiddenNotesDropZone() {
    $("#HiddenAttachments").dropzone({
        maxFiles: 2000,
        parallelUploads: 1,
        maxFilesize: 2048,
        filesizeBase: 1024,
        disablePreviews: true,
        clickable: true,
        uploadMultiple: true,
        addRemoveLinks: true,
        createImageThumbnails: false,
        url: "/api/Quotes/HiddenAttachments",
        success: function(file, response) {
            if (response !== -1) {
                fileIds.push(response);
                // 将服务器返回的ID存储在file对象上，方便后续移除时调用
                file.attachmentId = response;
            }
        },
        removedfile: function(file) {
            // 仅当文件已成功上传并获得ID时，才发起删除请求
            if (file.attachmentId) {
                fetch(`/api/Quotes/DeleteUpload/${file.attachmentId}`, {
                    method: 'DELETE',
                    headers: {
                        // 如果你的后端需要CSRF令牌，务必添加这里（根据你的框架调整）
                        // 'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
                    }
                })
                .then(response => {
                    if (response.ok) {
                        // 从fileIds数组中移除对应的ID
                        const idIndex = fileIds.indexOf(file.attachmentId);
                        if (idIndex !== -1) {
                            fileIds.splice(idIndex, 1);
                        }
                        // 移除页面上的文件预览元素
                        file.previewElement.remove();
                    } else {
                        // 处理删除失败的情况，给用户反馈
                        alert('删除附件失败，请稍后重试');
                    }
                })
                .catch(error => {
                    console.error('删除请求出错:', error);
                    alert('删除附件时发生错误');
                });
            } else {
                // 如果文件还没上传成功就被移除，直接删除DOM元素
                file.previewElement.remove();
            }
        }
    });
}

方案2：自定义移除按钮的点击事件 #

如果你希望保留移除链接的样式，但不想依赖内部属性，可以在文件上传成功后，手动给移除按钮绑定点击事件，阻止默认跳转并发送删除请求：

function HiddenNotesDropZone() {
    $("#HiddenAttachments").dropzone({
        // 其他配置保持不变
        url: "/api/Quotes/HiddenAttachments",
        success: function(file, response) {
            if (response !== -1) {
                fileIds.push(response);
                file.attachmentId = response;
                
                // 找到移除按钮并绑定自定义点击事件
                const removeBtn = file.previewElement.querySelector('.dz-remove');
                if (removeBtn) {
                    removeBtn.addEventListener('click', (e) => {
                        e.preventDefault(); // 阻止默认的链接跳转行为
                        
                        // 发送删除请求
                        fetch(`/api/Quotes/DeleteUpload/${file.attachmentId}`, {
                            method: 'DELETE',
                            // 添加CSRF令牌等必要头信息
                        })
                        .then(response => {
                            if (response.ok) {
                                // 更新fileIds数组并移除文件
                                const idIndex = fileIds.indexOf(file.attachmentId);
                                if (idIndex !== -1) {
                                    fileIds.splice(idIndex, 1);
                                }
                                this.removeFile(file); // 调用Dropzone内置方法移除文件
                            } else {
                                alert('删除附件失败');
                            }
                        });
                    });
                }
            }
        }
    });
}

最佳实践总结 #

• 避免依赖内部私有属性：永远不要直接操作Dropzone以下划线开头的属性，这些是内部实现细节，随时可能变更。
• 用POST/DELETE请求执行删除：GET请求仅用于获取资源，修改/删除资源应该用POST或DELETE，同时带上CSRF令牌防范攻击。
• 将业务数据绑定到file对象：把服务器返回的ID存在file对象上，而不是通过DOM元素传递，这样更可靠。
• 处理异常情况：添加删除失败的处理逻辑，给用户明确的反馈，提升体验。

内容的提问来源于stack exchange，提问作者Zanzabar